» Форма входа

»Мoy-weB ver.4.1

» Статистика

 Главная » 2008 » Сентябрь » 10 » Верстка (эпизод 2-й) – Базовые навыки.

Верстка (эпизод 2-й) – Базовые навыки.
10.Сен.2008 | 17:28:45
Верстка (эпизод 2-й) – Базовые навыки.

Вступление.

Опять таки здрастеwink.gif
Это
продолжение серии статей «Базовые навыки верстки», в которых будет
рассказываться как «лучше всего» и «правильно» верстать сайты, чтобы
они соответствовали современным требованиям, и что особенно важно были
к тому же семантически правильными и ВАЛИДНЫМИ! Я не зря взял в скобки
«лучше всего» и «правильно» так как технологии очень быстро меняются, и
постоянно будут появляется более новые, и практичные модели верстки, но
все же есть некая база на сегодняшний день, которая не меняется с
постоянными обновлениями языков и стандартов, вот о ней и пойдет речь,
как и в предыдущей статье. В данной статье я расскажу о разновидностях
меню (навигации) и как это делается правильно и просто.

Статью пришлось разделить на несколько, т.к. получилась сильно длинной smile.gif

Начнем…

Исходя
из правил оптимизации кода для поисковых систем, меню лучше всего
оформлять с использованием элементов UL и LI. Итак на арене
одноуровневое меню, прошу любить и жаловать! wink.gif

1.1) Одноуровневое меню.
Html – одноуровневого меню:
CODE

<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
</ul>


1.2) Многоуровневое меню.
Html – многоуровневого меню:
CODE

<ul>
 <li>
   <a href="#"> Ссылка 1</a>
   <ul>
     <li><a href="#">Ссылка 1.1</a></li>
     <li><a href="#">Ссылка 1.2</a></li>
     <li><a href="#">Ссылка  3</a></li>
   </ul>
 </li>
 <li>
   <a href="#">Ссылка  2</a>
   <ul>
     <li><a href="#">Ссылка  2.1</a></li>
     <li><a href="#">Ссылка  2.2</a></li>
     <li><a href="#">Ссылка  2.3</a></li>
   </ul>
 </li>
 <li>
   <a href="#">Ссылка  3</a>
   <ul>
     <li><a href="#">Ссылка  3.1</a></li>
     <li><a href="#">Ссылка  3.2</a></li>
     <li><a href="#">Ссылка  3.3</a></li>
   </ul>
 </li>
</ul>


Вот пример кода описанного выше, чтобы новичкам было понятно а зачем оно им нужно было:
HTML – пример одноуровневого меню.
CODE

<ul class="menu">
<li class="first"><a href="#">Главная</a></li>
<li><a href="#">Купить</a></li>
<li><a href="#">Доставка</a></li>
<li><a href="#">Расположение</a></li>
<li><a href="#">Партнеры</a></li>
<li><a href="#">Контакты</a></li>
</ul>

CSS – одноуровневого меню.
CODE

ul.menu{
list-style:none;
margin:0;
padding:0;
}
ul.menu li{
float:left;
background:url(../images/hr.gif) no-repeat 0 100%; /* см. примечание */
padding:0 10px;
display:inline;
font-size:10px;
}
ul.menu li.first{
background:none;
}
ul.menu li a{
float:left;
font: 10px Arial, sans-serif;
color:#000;
}

Цитирую
Обратите
внимание на тот факт, что разделитель у меня не border или еще бог
знает что а именно картинка, на самом деле так принято писать, а не
иначе.

Ну а теперь займемся вещами по интереснее. Создание выпадающего меню разных видов, поехали…
2.1) Стандартное одноуровневое выпадающее меню.


2.1.1) Структура стандартного одноуровневого выпадающего меню (вертикального):
Верстка (эпизод 2-й) – Базовые навыки.

HTML – структура стандартного одноуровневого выпадающего меню (вертикального):
CODE

<ul id="menu">
<li class="first"><a href="#">Главная</a></li>
<li><a href="#">Каталог товаров</a>
 <ul>
  <li><a href="#">Товар 1</a></li>
  <li><a href="#">Товар 3</a></li>
  <li><a href="#">Товар 4</a></li>
  <li><a href="#">Товар 5</a></li>
  <li><a href="#">Товар 6</a></li>
  <li><a href="#">Товар 7</a></li>
 </ul>
</li>
<li><a href="#">Регистрация</a></li>
<li><a href="#">Контакты</a></li>
</ul>


CSS – структура стандартного одноуровневого выпадающего меню (вертикального):
CODE

#menu {
margin: 0;
padding: 0;
}
#menu li {
border: 1px solid #09f;
width: 150px;
background: #fff;
list-style: none;
}
/* немного украшательств */
#menu li a {
color: #009;
font: 12px/12px Arial, sans-serif;
padding: 5px;
display: block;
text-decoration: none;
}
#menu li a:hover {
color: #0cf;
}
/* вот от сюда собственно и начинается вся соль способа */
#menu li.hover, /* для IE6, нет функции  hover  на элементы, только на теги <a>(ссылки;) ) */
#menu li:hover {
position: relative;
}
#menu li.hover ul, /* для IE6, нет функции  hover  на элементы, только на теги <a>(ссылки;) )*/
#menu li:hover ul {
display: block;
}
/* еще немного украшательств */
#menu li.hover a,
#menu li:hover a {
color: #0cf;
}
#menu li.hover ul li a,
#menu li:hover ul li a {
color: #009;
}
#menu ul li a:hover {
color: #0cf!important;
}
#menu ul {
margin: 0;
padding: 0;
display: none;
position: absolute;
left: 100%;
top: 0; /* left и top смещение относительно родительского элемента */
}

Цитирую

Небольшая расшифровка для начинающих:

Как известно интерпретатор читает CSS с низу в верх, то есть все, что
ниже считается приоритетнее. Поэтому сначала выпадающему меню
присваивается (display: none;), а уже потом, если есть наведение на
строку ссылки, <li> – (#menu li:hover ul) применяется свойство
(display: block;).

Так же для IE6 необходим и JavaScript.
JS – структура стандартного одноуровневого выпадающего меню (любого):
CODE

function initPage()
{
var nav = document.getElementById("menu");
if (nav)
{
 var nodes = nav.getElementsByTagName("li");
 for (var i = 0; i < nodes.length; i++)
 {  
   nodes[i].onmouseover = function ()
   {
    this.className += " hover";
   }
   nodes[i].onmouseout = function ()
   {
    this.className = this.className.replace(" hover", "");
   }
 }
}
}
if (window.attachEvent) window.attachEvent("onload", initPage);

Цитирую
Для новичков расскажу как подключается JavaScript:

Между <head> и </head> вставьте следующее - <script
type="text/javascript" src="название файла.js"></script>.


2.1.2) Структура стандартного одноуровневого выпадающего меню (горизонтального):
Верстка (эпизод 2-й) – Базовые навыки.

На
самом деле изменений практически нет, только изменяется пару строк в
CSS, по этому выложу только его, а то урок получится сильно большой wink.gif.
CSS – структура стандартного одноуровневого выпадающего меню (горизонтального):
CODE
#menu {
margin: 0;
padding: 0;
}
#menu li {
border: 1px solid #09f;
width: 150px;
background: #fff;
list-style: none;
float: left;
}
/* немного украшательств */
#menu li a {
color: #009;
font: 12px/12px Arial, sans-serif;
padding: 5px;
display: block;
text-decoration: none;
}
#menu li a:hover {
color: #0cf;
}
/* вот от сюда собственно и начинается вся соль способа */
#menu li.hover, /* для IE6 */
#menu li:hover {
position: relative;
}
#menu li.hover ul, /* для IE6 */
#menu li:hover ul {
display: block;
}
/* еще немного украшательств */
#menu li.hover a,
#menu li:hover a {
color: #0cf;
}
#menu li.hover ul li a,
#menu li:hover ul li a {
color: #009;
}
#menu ul li a:hover {
color: #0cf!important;
}
#menu ul {
margin: 0;
padding: 0;
display: none;
position: absolute;
left: 0;
top: 100%; /* left и top смещение относительно родительского элемента */
}

Продолжение следует…
Категория: Статьй и уроки | Просмотров: 571 | Добавил: CorsaR
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]