создание кнопки
Кнопку на веб-странице можно создать с помощью тега <INPUT> и тега <BUTTON>.
меня сейчас интересует вариант <BUTTON>
причем, без тега <form>
если внутри тела страницы разместить <button>Кнопка с текстом</button> получится
на такой кнопке можно разместить элементы html, включая изображения и таблицы.
кнопка с картинкой пишется так:
<button><img src="/papka/kartinka.gif" width="25" height="32" alt="картинка"> Кнопка с рисунком</button>
после img src=" правильно написать ссылочку
там, где на кнопке квадратик, появится картинка
для перехода по ссылке:
<button onClick="document.location='http://yandex.ru';">Переход по ссылке</button>
дальше
создание менюшки
следующий материал взят тута
примеры аффтора: горизонтальное выпадающее меню, вертикальное и линейное меню
Для начала рассмотрим как должна выглядеть HTML разметка нашего меню. Здесь все очень просто — все меню это вложенные списки:
<!-- разметка меню — это вложенные списки -->
<ul class="dropdown">
<li ><a href="/html-css/css-drop-down-menu/">Вернуться к статье</a></li>
<li><a href="./" class="dir">Посмотреть разделы сайта</a>
<ul>
<li><a class="dir" href="/html-css/">HTML и CSS</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
<li><a href="/js/">JavaScript</a></li>
<li><a href="/photoshop/">Photoshop</a></li>
<li><a href="/design/">Дизайн</a></li>
<li><a href="/misc/">Разное</a></li>
</ul>
</li>
Класс
описание тега <ul>
описание тега <li>
после href=" как обычно должна идти ссылка . в данном примере автор использует относительные ссылки - относительно своего root folder, т.е. коренной папки, в которой живет его сайт. у нас они работать не будут. нужны свои (правильно написать ссылочку). у него работают: пример готового горизонтального меню
у нас же пока получилась штука как на картинке справа:
для связывания документа с файлом CSS применяется тег <LINK>. Данный тег помещается в контейнер <HEAD> (подключение CSS)
у меня он выглядит так:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>buttons and menu</title>
<link rel="stylesheet" type="text/css" href="horizontalMenu_raspolozhenie.css">
</head>
описание атрибута rel
значение stylesheet обращение к внешнему ресурсу: вызов таблицы стилей
для того, чтобы немного разобраться в CSS я воспользовалась еще одним интернет-уроком
содержимое файла CSS , отвечающее за расположение меню:
/** * Horizontal CSS Drop-Down Menu Module * @file dropdown.css * @package Dropdown * @version 0.7.1 * @type Transitional * @stacks 597-599 * @browsers Windows: IE6+, Opera7+, Firefox1+ * Mac OS: Safari2+, Firefox2+ * * @link http://www.lwis.net/ * @copyright 2006-2008 Live Web Institute. All Rights Reserved. * */ первым делом убираем разметку ненумерованного списка и отступы
ul.dropdown, ul.dropdown li, ul.dropdown ul { list-style: none; margin: 0; padding: 0; }
задаем положение элементов списка необходимо задать значение для свойства "position", как"relative", для того, чтобы относительно основного меню абсолютно позиционировать подменю. зададим нижнее подчеркивание для пунктов меню.
Свойство z-index определяет позицию элемента на оси Z: грубо говоря - как глубоко или близко к поверхности расположен элемент относительно остальных.чем выше значение, тем выше элемент. подробнее
ul.dropdown { position: relative; z-index: 597; float: left; }
задаем положение элементов списка
ul.dropdown li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; } ul.dropdown li.hover, ul.dropdown li:hover { position: relative; z-index: 599; cursor: default; } ul.dropdown ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } ul.dropdown ul li { float: none; } ul.dropdown ul ul { top: 1px; left: 99%; } ul.dropdown li:hover > ul { visibility: visible; }
Кнопку на веб-странице можно создать с помощью тега <INPUT> и тега <BUTTON>.
меня сейчас интересует вариант <BUTTON>
причем, без тега <form>
если внутри тела страницы разместить <button>Кнопка с текстом</button> получится
на такой кнопке можно разместить элементы html, включая изображения и таблицы.
кнопка с картинкой пишется так:
<button><img src="/papka/kartinka.gif" width="25" height="32" alt="картинка"> Кнопка с рисунком</button>
после img src=" правильно написать ссылочку
там, где на кнопке квадратик, появится картинка
для перехода по ссылке:
<button onClick="document.location='http://yandex.ru';">Переход по ссылке</button>
дальше
создание менюшки
следующий материал взят тута
примеры аффтора: горизонтальное выпадающее меню, вертикальное и линейное меню
- создается разметка меню в HTML ;
- файлы CSS :отвечающий за расположение элементов меню, второй — за внешнее оформление (что-то вроде скина);
- внесение поправок для IE, ибо без них не фурычит.
Для начала рассмотрим как должна выглядеть HTML разметка нашего меню. Здесь все очень просто — все меню это вложенные списки:
<!-- разметка меню — это вложенные списки -->
<ul class="dropdown">
<li ><a href="/html-css/css-drop-down-menu/">Вернуться к статье</a></li>
<li><a href="./" class="dir">Посмотреть разделы сайта</a>
<ul>
<li><a class="dir" href="/html-css/">HTML и CSS</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
<li><a href="/js/">JavaScript</a></li>
<li><a href="/photoshop/">Photoshop</a></li>
<li><a href="/design/">Дизайн</a></li>
<li><a href="/misc/">Разное</a></li>
</ul>
</li>
Класс
dir ставится на тех элементах, которые содержат вложенности.описание тега <ul>
описание тега <li>
после href=" как обычно должна идти ссылка . в данном примере автор использует относительные ссылки - относительно своего root folder, т.е. коренной папки, в которой живет его сайт. у нас они работать не будут. нужны свои (правильно написать ссылочку). у него работают: пример готового горизонтального менюу нас же пока получилась штука как на картинке справа:
для связывания документа с файлом CSS применяется тег <LINK>. Данный тег помещается в контейнер <HEAD> (подключение CSS)
у меня он выглядит так:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>buttons and menu</title>
<link rel="stylesheet" type="text/css" href="horizontalMenu_raspolozhenie.css">
</head>
описание атрибута rel
значение stylesheet обращение к внешнему ресурсу: вызов таблицы стилей
для того, чтобы немного разобраться в CSS я воспользовалась еще одним интернет-уроком
содержимое файла CSS , отвечающее за расположение меню:
/** * Horizontal CSS Drop-Down Menu Module * @file dropdown.css * @package Dropdown * @version 0.7.1 * @type Transitional * @stacks 597-599 * @browsers Windows: IE6+, Opera7+, Firefox1+ * Mac OS: Safari2+, Firefox2+ * * @link http://www.lwis.net/ * @copyright 2006-2008 Live Web Institute. All Rights Reserved. * */ первым делом убираем разметку ненумерованного списка и отступы
ul.dropdown, ul.dropdown li, ul.dropdown ul { list-style: none; margin: 0; padding: 0; }
задаем положение элементов списка необходимо задать значение для свойства "position", как"relative", для того, чтобы относительно основного меню абсолютно позиционировать подменю. зададим нижнее подчеркивание для пунктов меню.
Свойство z-index определяет позицию элемента на оси Z: грубо говоря - как глубоко или близко к поверхности расположен элемент относительно остальных.чем выше значение, тем выше элемент. подробнее
ul.dropdown { position: relative; z-index: 597; float: left; }
задаем положение элементов списка
ul.dropdown li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; } ul.dropdown li.hover, ul.dropdown li:hover { position: relative; z-index: 599; cursor: default; } ul.dropdown ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } ul.dropdown ul li { float: none; } ul.dropdown ul ul { top: 1px; left: 99%; } ul.dropdown li:hover > ul { visibility: visible; }
Комментариев нет:
Отправить комментарий