Магическое меню ● ВЕБМАСТЕРУ ● FAQZERO.COM

ВЕБМАСТЕРУ ● Магическое меню

Красивые динамичные и стильные меню показаны на примере внизу. Здесь приведены два вида меню, выполненых в одном стиле. Можно использовать их по отдельности. Вы легко сможете настроить это меню для вашего сайта. Можно менять цвет фона, цвета подсветки пунктов меню. Посмотрите демо-пример. Ниже приведена подробная инструкция и все необходимые файлы для установки меню на ваш сайт.

Приведем подробную инструкцию по установке такого меню на ваш сайт. Для начала вам понадобится поключить стилевой файл. Вам следует подправить этот код - указать ширину вашего меню в пикселях.

* { margin: 0; padding: 0; }
.nav-wrap { margin: 50px auto; 
 background-color: rgba(0,0,0,0.6); 
 border-top: 2px solid white; 
 border-bottom: 2px solid white; 
}

.nav-wrap a { color: #eee; }
.nav-wrap a:hover { color: white; }

/* Clearfix */
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */

/* Example One */
#example-one { margin: 0 auto; list-style: none; 
 position: relative; width: 480px; 
}
#example-one li {display: inline-block;}
#example-one a { color: #bbb; font-size: 14px; 
 float: left; padding: 6px 10px 4px 10px;
 text-decoration: none;
 text-transform: uppercase;
}
#example-one a:hover {color: white;}
#magic-line { position: absolute; bottom: -2px; 
 left: 0; width: 100px; 
 height: 2px; background: #fe4902;
}
.current_page_item a { color: white ! important; }
.ie6 #example-one li, .ie7 #example-one li { display: inline;}
.ie6 #magic-line {bottom: -3px;}


/* Example Two */
#example-two { margin: 0 auto; list-style: none; 
 position: relative; width: 480px; 
}
#example-two li {display: inline-block;}
#example-two li a { position: relative; z-index: 200; 
 color: #bbb; font-size: 14px; 
 display: block; float: left; 
 padding: 6px 10px 4px 10px;
 text-decoration: none;
 text-transform: uppercase; 
}
#example-two li a:hover {color: white;}
#example-two #magic-line-two { 
 position: absolute; top: 0; left: 0; 
 width: 100px; background: #900; 
 z-index: 100; -moz-border-radius: 5px; 
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
.current_page_item_two a { color: white !important; 
}
.ie6 #example-two li, .ie7 #example-two li {
 display: inline;
}

В начале вашей страницы установите код, приведенный ниже. Если не понимаете, что такое !DOCTYPE, то почитайте. Эти строки обеспечат вам совместимость с проблемными браузерами.

<!DOCTYPE html><!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

Дальше подключите скрипты, так как это показано ниже. Размещать эти коды следует в заголовке. Перед этим вам следует установить две библиотеки и в скриптах прописать свой путь к ним. Скачать эти скрипты можно здесь:

jquery.color-RGBa-patch.js example.js

<!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
 
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
 <script src='/examples/magicline/jquery.color-RGBa-patch.js'></script>
 <script src='/examples/magicline/example.js'></script>

Осталось вставить на страницу код, который и будет отображать меню. Настройте само меню, указывая пункты меню. Для второго примера еще дополнително надо указывать цвет подсветки пункта меню, например: rel="#fe4902". Все пункты могут быть различного цвета. Красивый эффект достигается, если цвета меняются плавно.

<div style="font: 14px Georgia, serif; background: #2F2626; color: #eee;">
<br>
 <div class="nav-wrap">
 <ul class="group" id="example-one">
 <li class="current_page_item">
 <a href="#">Home</a>
 </li>
 <li><a href="#">Buy Tickets</a></li>
 <li><a href="#">The Show</a></li>
 <li><a href="#">Videos</a></li>
 <li><a href="#">Photos</a></li>
 </ul>
 </div>
 
<div class="nav-wrap"> 
 <ul class="group" id="example-two">
 <li><a rel="#fe4902" href="#">Home</a></li>
 <li><a rel="#A41322" href="#">Buy Tickets</a></li>
 <li><a rel="#C6AA01" href="#">Group Sales</a></li>
 <li class="current_page_item_two"><a rel="#900" href="#">Reviews</a></li>
 </ul>
</div>
<br>
</div>

Меню легко настраивается и модифицируется.

ВЕБМАСТЕРУ ● Просмотров [ 354 ] ● 30.07.11