Меню
Как создать сайт с нуля, уроки
Как создать сайт на ucoz, уроки
Заработок на кликах
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Каталог



Главная » Статьи » Создание веб сайтов » Как cделать сайт
Выпадающее меню на css

В этой статье я расскажу вам как сделать выпадающее меню на CSS . Преимущества такого меню думаю очевидно. Самое главное из них – это то, что такое меню будет работать при выключенном Java Script в браузере. Будут рассмотрены 2 идентичных примера меню, первое – горизонтальное меню, второе – вертикальное меню. Принцип действия у них один и тот же.

Начнем с горизонтального меню, оно имеет следующий HTML код:

<ul id="cssmenu">
       
<li><a href="#">Горизонтальное</a>
               
<ul>
                       
<li><a href="#">Ссылка 1</a></li>
                       
<li><a href="#">Ссылка 2</a></li>
               
</ul>
       
</li>
       
<li><a href="#">CSS</a>
               
<ul>
                       
<li><a href="#">Ссылка 1</a></li>
                       
<li><a href="#">Ссылка 2</a></li>
                       
<li><a href="#">Ссылка 3</a></li>
                       
<li><a href="#">Ссылка 4</a></li>
                       
<li><a href="#">Ссылка 5</a></li>
               
</ul>
       
</li>
       
<li><a href="#">Меню</a>
               
<ul>
                       
<li><a href="#">Ссылка 1</a></li>
                       
<li><a href="#">Ссылка 2</a></li>
               
</ul>
       
</li>
</ul>

Принцип думаю ясен и вы сообразите как вставить свои пункты меню. Теперь напишем CSS код для этого еще безобразного меню:

/* CSS Document */
ul
#cssmenu {
        width
:350px;
        margin
: 0;
        border
: 0 none;
        padding
: 0;
        list
-style: none;
        background
: #003366;
        height
: 30px;
        font
: bold 12px/28px Verdana, Arial;
        border
-left:#003366 1px solid;
}

ul
#cssmenu li {
        margin
: 0;
        border
: 0 none;
        padding
: 0;
       
float: left;
        display
: inline;
        list
-style: none;
        position
: relative;
        height
: 30px;
}

ul
#cssmenu ul {
        margin
: 0;
        border
: 0 none;
        padding
: 0;
        width
: 160px;
        list
-style: none;
        display
: none;
        position
: absolute;
        top
: 30px;
        left
: 0;
}

ul
#cssmenu ul:after {
        clear
: both;
        display
: block;
        font
: 1px/0px serif;
        content
: ".";
        height
: 0;
        visibility
: hidden;
}

ul
#cssmenu ul li {
        width
: 150px;
       
float: left;
        display
: block !important;
        display
: inline;
}

/* Main Menu */
ul
#cssmenu a {
        border
: 0px;
        padding
: 0 10px;
       
float: none !important;
       
float: left;
        display
: block;
        background
: #003366;
        color
: #FFFFFF;
        font
: bold 12px/28px Verdana, Arial;
        text
-decoration: none;
        height
: auto !important;
        height
: 1%;
}

/* Main Menu Hover */
ul
#cssmenu a:hover,
ul
#cssmenu li:hover a,
ul
#cssmenu li.iehover a {
        background
: #FFFFFF;
        color
:#003366;
        border
-top:#003366 1px solid;
}

/* Second Menu */
ul
#cssmenu li:hover li a,
ul
#cssmenu li.iehover li a {
        border
-top: 2px solid #FFFFFF;
       
float: none;
        background
: #003366;
        color
: #FFFFFF;
}

/* Second Menu Hover */
ul
#cssmenu li:hover li a:hover,
ul
#cssmenu li:hover li:hover a,
ul
#cssmenu li.iehover li a:hover,
ul
#cssmenu li.iehover li.iehover a {
        border
-top: 2px solid #FFFFFF;
        background
: #FFFFFF;
        color
:#003366;
        border
:#003366 1px solid;
}

ul
#cssmenu ul ul {
        display
: none;
        position
: absolute;
        top
: 0;
        left
: 170px;
}

ul
#cssmenu li:hover ul ul,
ul
#cssmenu li.iehover ul ul {
        display
: none;
}

ul
#cssmenu li:hover ul,
ul
#cssmenu ul li:hover ul,
ul
#cssmenu li.iehover ul,
ul
#cssmenu ul li.iehover ul {
        display
: block;
}

Все!?!? Ан нет. IE никак не хочет отображать такое меню как нам надо, поэтому напишем небольшой JavaScript для IE:

// JavaScript Document
function cssmenuhover()
{
       
if(!document.getElementById("cssmenu"))
               
return;
       
var lis = document.getElementById("cssmenu").getElementsByTagName("LI");
       
for (var i=0;i<lis.length;i++)
       
{
                lis
[i].onmouseover=function(){this.className+=" iehover";}
                lis
[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" iehover\\b"), "");}
       
}
}
if (window.attachEvent)
        window
.attachEvent("onload", cssmenuhover);

Вуаля. Теперь наше меню кроссбраузерное и корректно работает в IE5.5+, FF1+, Opera8+. Теперь посмотрим как делается вертикальное меню.

Вертикальное CSS меню

HTML код:

<ul id="navmenu-v"> 
   
<li><a href="#">Вертикальное</a>
   
<ul>
       
<li><a href="#">Ссылка 1</a></li>
       
<li><a href="#">Ссылка 2</a></li>
       
</ul></li>
   
<li><a href="#">CSS</a>
     
<ul>
       
<li><a href="#">Ссылка 1</a></li>
       
<li><a href="#">Ссылка 2</a></li>
       
<li><a href="#">Ссылка 3</a></li>
       
<li><a href="#">Ссылка 4</a></li>
       
<li><a href="#">Ссылка 5</a></li>
       
</ul>
       
</li>
       
<li><a href="#">Меню</a>
       
<ul>
       
<li><a href="#">Ссылка 1</a></li>
       
<li><a href="#">Ссылка 2</a></li>
       
</ul></li>  
 
</ul>

И CSS код:

/* CSS Document */
ul
#navmenu-v,
ul
#navmenu-v li,
ul
#navmenu-v ul {
  margin
: 0;
  border
: 0 none;
  padding
: 0;
  width
: 160px;
  list
-style: none;
}

ul
#navmenu-v:after {
  clear
: both;
  display
: block;
  font
: 1px/0px serif;
  content
: ".";
  height
: 0;
  visibility
: hidden;
}

ul
#navmenu-v li {
 
float: left;
  display
: block !important;
  display
: inline;
  position
: relative;
  border
:#003366 1px solid;
}
ul
#navmenu-v li ul li {
border
:none;
border
-bottom:#FFFFFF 2px solid;
}

/* Root Menu */
ul
#navmenu-v a {
  padding
: 0 6px;
  display
: block;
  background
: #003366;
  color
: #FFFFFF;
  font
: bold 12px/28px Verdana, Arial;
  text
-decoration: none;
  height
: auto !important;
  height
: 1%;
}


ul
#navmenu-v a:hover,
ul
#navmenu-v li:hover a,
ul
#navmenu-v li.iehover a {
  background
: #FFFFFF;
  color
: #000000;

}

/* 2nd Menu */
ul
#navmenu-v li:hover li a,
ul
#navmenu-v li.iehover li a {
  background
: #003366;
  color
: #FFFFFF;
  border
:#003366 1px solid;
}


ul
#navmenu-v li:hover li a:hover,
ul
#navmenu-v li:hover li:hover a,
ul
#navmenu-v li.iehover li a:hover,
ul
#navmenu-v li.iehover li.iehover a {
  background
: #FFFFFF;
  color
: #003366;
  border
:#003366 1px solid;
}



ul
#navmenu-v ul,
ul
#navmenu-v ul ul,
ul
#navmenu-v ul ul ul {
  display
: none;
  position
: absolute;
  top
: 0;
  left
: 161px;
}


ul
#navmenu-v li:hover ul ul,
ul
#navmenu-v li:hover ul ul ul,
ul
#navmenu-v li.iehover ul ul,
ul
#navmenu-v li.iehover ul ul ul {
  display
: none;
}

ul
#navmenu-v li:hover ul,
ul
#navmenu-v ul li:hover ul,
ul
#navmenu-v ul ul li:hover ul,
ul
#navmenu-v li.iehover ul,
ul
#navmenu-v ul li.iehover ul,
ul
#navmenu-v ul ul li.iehover ul {
  display
: block;
}

Ну и небольшой JS код для корректности отображения в IE:

navHover = function() {
       
var lis = document.getElementById("navmenu-v").getElementsByTagName("LI");
       
for (var i=0; i<lis.length; i++) {
                lis
[i].onmouseover=function() {
                       
this.className+=" iehover";
               
}
                lis
[i].onmouseout=function() {
                       
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
               
}
       
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);

Вот собственно и все, смотрим что получается.

Скачать >>



Источник: http://cssor.ru
Категория: Как cделать сайт | Добавил: Ford20 (13.10.2011)
Просмотров: 636 | Рейтинг: 2.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]