• Страница 1 из 1
  • 1
Красивое горизонтальное меню с помощью CSS
shooterДата: Вторник, 05.10.2010, 00:31 | Сообщение # 1
^^ХулиганьЁ^^
Логин: shooter
Имя: жека загрядский
Сообщений: 468
Награды: 4
Репутация: 65
Замечания:

В данном уроке я покажу Вам, как сделать красивое меню с выпадающим подменю.

В большинстве случаев добиться данного эффекта можно с помощью CSS. Но, поскольку IE6 очень вредный браузер, нам необходимо будет использовать немного jQuery для полной кроссбраузерности.

По просьбе автора данного урока исходники не доступны для скачивания. Ссылка на демо версию ведет на другой сайт.
Используя пошаговые инструкции данного урока, Вы сможете легко воссоздать данный пример.


HTML

Подменю каждого элемента должны находиться вместе между тегами .

Code
<ul id="topnav">  
<li><a href="#">Link</a></li>  
<li>  
<a href="#">Link</a>  
<!--Subnav Starts Here-->  
<span>  
<a href="#">Subnav Link</a> |  
<a href="#">Subnav Link</a> |  
<a href="#">Subnav Link</a>  
</span>  
<!--Subnav Ends Here-->  

</li>  
<li><a href="#">Link</a></li>  
</ul>

CSS

В данном меню все подменю не будут появляться прямо под элементами меню. Все подменю будут одинаково отображаться по левому краю.

Code
ul#topnav {  
margin: 0; padding: 0;  
float: left;  
width: 970px;  
list-style: none;  
position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/  
font-size: 1.2em;  
background: url(topnav_stretch.gif) repeat-x;  
}  

ul#topnav li {  
float: left;  
margin: 0; padding: 0;  
border-right: 1px solid #555; /*--Divider for each parent level links--*/  
}  

ul#topnav li a {  
padding: 10px 15px;  
display: block;  
color: #f0f0f0;  
text-decoration: none;  
}  
ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }  
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/  
ul#topnav li span {  
   float: left;  
   padding: 15px 0;  
   position: absolute;  

   left: 0; top:35px;  
   display: none; /*--Hide by default--*/  
   width: 970px;  
   background: #1376c9;  
   color: #fff;  
   /*--Bottom right rounded corner--*/  
   -moz-border-radius-bottomright: 5px;  
   -khtml-border-radius-bottomright: 5px;  
   -webkit-border-bottom-right-radius: 5px;  
   /*--Bottom left rounded corner--*/  
   -moz-border-radius-bottomleft: 5px;  
   -khtml-border-radius-bottomleft: 5px;  
   -webkit-border-bottom-left-radius: 5px;  
   }  
   ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/  
   ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/  
   ul#topnav li span a:hover {text-decoration: underline;}

jQuery - специально для IE6

Поскольку IE6 не понимает li:hover, нам придется использовать jQuery.

Code
<script type="text/javascript"  
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>  
<script type="text/javascript">  
   $(document).ready(function() {  
   $("ul#topnav li").hover(function() { //Hover over event on list item  
   $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item  
   $(this).find("span").show(); //Show the subnav  
   } , function() { //on hover out...  

   $(this).css({ 'background' : 'none'}); //Ditch the background  
   $(this).find("span").hide(); //Hide the subnav  
   });  
});  
   </script>

Заключение

Красиво и просто. Надеюсь, данное меню пригодится Вам!!!

P.S. Здесь Вы найдете демо версию данного меню, но с одним небольшим отличием - подменю открываются только при нажатии на элемент меню. Реализацию данного примера можно подсмотреть в исходном коде страницы.


Тайный_АгентДата: Вторник, 05.10.2010, 13:55 | Сообщение # 2
Логин: Тайный_Агент
Имя: Wladimir Sommer
Сообщений: 265
Награды: 7
Репутация: 91
Замечания:
Кул

Xen@NДата: Понедельник, 01.11.2010, 15:24 | Сообщение # 3
Логин: Xen@N
Имя:
Сообщений: 57
Награды: 0
Репутация: 6
Замечания:
Согласен, но я бы хотел задать вопросик, можно ли использовать только хтмл и ксс??? без jquery ?????
  • Страница 1 из 1
  • 1
Поиск:

Статистика Форума
Лучшие пользователи
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
LaiNeR Постов [ 3127 ]
Staistesap Постов [ 1545 ]
z1M Постов [ 1488 ]
Mooxyrep Постов [ 1145 ]
Pooniacact Постов [ 986 ]
KoreshoK Постов [ 644 ]
LonS Постов [ 585 ]
BIG_BOSS Постов [ 572 ]
DoZa Постов [ 564 ]
shooter Постов [ 468 ]
LonS Репутация [ 546 ]
LaiNeR Репутация [ 519 ]
Smofee Репутация [ 477 ]
СнAйПер Репутация [ 436 ]
MedeX Репутация [ 412 ]
TiPSy Репутация [ 300 ]
bleff Репутация [ 279 ]
-=SToRM=- Репутация [ 235 ]
A6c3Ht^ Репутация [ 225 ]
NoRD Репутация [ 210 ]
Общение [ 1309 ]
Считаем до 1 000 [ 664 ]
Поговорим обо всем :) (девушки, машины, личная жизнь и тд) [ 369 ]
Афоризмы (Не комментируйте) [ 301 ]
Играем в СЛОВА [ 187 ]
Конкурс "Угадай возраст". [ 183 ]
Конкурс "Угадай автомобиль" [ 110 ]
Предложения по сайту [ 97 ]
Набивка постов [ 80 ]
Обломай товарища [ 75 ]
source-boost.ru | Мониторинг сервера CSS v34 [ 0 ]
source-boost.ru | Мониторинг сервера CSS v34 [ 0 ]
Скачать CSS v34 НОВЫЕ ПУШКИ - cs-kontra.ru [ 0 ]
Скачать CSS v34 НОВЫЕ ПУШКИ - cs-kontra.ru [ 0 ]
Скачать CSS v34 НОВЫЕ ПУШКИ - cs-kontra.ru [ 0 ]
Скачать CSS v34 НОВЫЕ ПУШКИ - cs-kontra.ru [ 0 ]
Скачать CSS v34 НОВЫЕ ПУШКИ - cs-kontra.ru [ 0 ]
Скачать CSS v34 НОВЫЕ ПУШКИ - cs-kontra.ru [ 0 ]
Скачать CSS v34 НОВЫЕ ПУШКИ - cs-kontra.ru [ 0 ]
Swatik [ 1 ]

Хостинг от uCoz | sitemap.xml | sitemap-forum.xml | sitemap-shop.xml | urllist.txt | |
PR-CY.ru