Горизонтальное выпадающее меню

12 дек 2012

Горизонтальное выпадающее меню

У нас вы можете скачать бесплатно Горизонтальное выпадающее меню

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.

ДЕМО

Горизонтальное выпадающее меню. Выпадающие элементы используют jQuery, все остальное оформлено на CSS.

HTML разметка

Структура самого меню довольно навороченная из-за его внешнего вида. Но в основе лежит обычный неупорядоченный список.

Показать / Скрыть текст

<div id="menu">
 <div class="active" id="nav">
 <ul>
 <li class="active">
 
 
 <a class="active" href="#">
 Главная
 
 </a>
 
 
 
 </li>
 <li>
 
 
 <a class="active" href="#">
 Форум
 
 </a>
 
 
 
 </li>
 <li>
 
 
 <a class="active" href="#">
 Новости
 
 </a>
 
 
 
 <ul>
 <li class="toparrow"></li>
 <li class="noback">
 
 
 <a class="sub" href="#">
 Пункт 0
 </a>
 
 
 </li>
 <li class="menubottom"></li>
 </ul>
 </li>
 <li>
 
 
 <a class="active" href="#">
 Видео
 
 </a>
 
 
 
 <ul>
 <li class="toparrow"></li>
 <li class="noback">
 
 
 <a class="sub" href="#">Пункт 1</a>
 
 
 </li>
 <li class="menubottom"></li>
 </ul>
 </li>
 <li>
 
 
 <a class="active" href="#">
 Музыка
 
 </a>
 
 
 
 <ul>
 <li class="toparrow"></li>
 <li class="noback">
 
 
 <a class="sub" href="#">
 Пункт 2
 </a>
 
 
 </li>
 <li class="menubottom"></li>
 </ul>
 </li>
 <li>
 
 
 <a class="active" href="#">
 Контакты
 
 </a>
 
 
 
 </li>
 <li>
 
 
 <a class="active" href="#">
 Ссылки
 
 </a>
 
 
 
 <ul>
 <li class="toparrow"></li>
 <li class="noback">
 
 
 <a class="sub" href="#">
 Пункт 3
 </a>
 
 
 </li>
 <li class="noback">
 
 
 <a class="sub" href="#">
 Пункт 4
 </a>
 
 
 </li>
 <li class="noback">
 
 
 <a class="sub" href="#">
 Пункт 5
 </a>
 
 
 </li>
 <li class="noback">
 
 
 <a class="sub" href="#">
 Пункт 6
 </a>
 
 
 </li>
 <li class="noback">
 
 
 <a class="sub" href="#">
 Пункт 7
 </a>
 
 
 </li>
 <li class="noback">
 
 
 <a class="sub" href="#">
 Пункт 8
 </a>
 
 
 </li>
 <li class="noback">
 
 
 <a class="sub" href="#">
 Пункт 9
 </a>
 
 
 </li>
 <li class="noback">
 
 
 <a class="sub" href="#">
 Пункт 10
 </a>
 
 
 </li>
 <li class="menubottom"></li>
 </ul>
 </li>
 <li>
 
 
 
 
 
 </li>
 </ul>
 </div>
 </div>

CSS

Показать / Скрыть текст

#nav ul li {
    margin-left:0px;
    position: relative;}

#nav a {
    color:#383838;
    cursor:pointer;
    display:block;
    float:left;
    font-size:16px;
    font-weight:bold;
    height:68px;
    line-height:17px;
    margin-left:25px;
    margin-top:0;
    overflow:hidden;
    padding-left:3px;
    padding-right:3px;
    padding-top:25px;
    text-decoration:none;
    text-shadow:1px 1px #ffffff;}

#nav a span {
    display:block;
    color:#383838;
    font-weight:normal;
    font-size:11px;}

#nav li li a {
    margin-left:0px;
    line-height:35px;
    margin-top:0px;
    height: 30px;
    background: none;
    font-weight: normal;
    padding: 0;
    text-indent: 18px;}

#nav li li {
    text-align: left;
    width: 233px;
    float: left;
    padding: 0;
    background: none;
    height:30px;
    padding-top:0px;}

#nav ul li ul li a {
    font-size:12px;
    line-height:28px;
    font-weight: normal;
    margin-left:-2px;
    width:225px; }

#nav ul li a {
    background: none; }

#nav ul li ul li {
    width:230px;
    background:transparent url(../images/fusion_ddmenumidh.png) repeat-x scroll 0 -33px; }

#nav ul li ul li:hover {
    background:transparent url(../images/fusion_ddmenumidh.png) repeat-y 0px 0px; }

#nav {
    position:relative;
    z-index:2;
    height: 30px;}
#nav, #nav ul {
    list-style: none;
    padding:0px 0px 0;}

#nav ul {
    float:left;
    padding: 0;
    margin: 0;
    margin:-3px 0 0;}

#nav ul ul a {
    display: block;
    text-decoration: none;
    width: 233px;
    text-transform: none;}

#nav li {
    float: left;
    padding: 0;
    margin-right:0px;
    background: none;
    height: 51px;}

#nav li ul {
    top: 59px;
    position: absolute;
    left: -999em;
    height: auto;
    width:  233px;
    border-width: 0;
    margin: 0;
    padding: 0;
    margin-left:16px;
    z-index: 4;}

#nav li ul a {
    font-weight: bold;
    color:#FFFFFF;}
#nav li ul ul {
    width:230px;
    margin: -70px 0 0 227px;}

* html #nav li ul ul {
    margin: -74px 0 0 227px;}

#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul{
    left: -999em;}

#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul{
    left: 0;
    position: absolute;}

#nav li:hover ul {
    left: 0;
    background-position: 0 0;}

#nav ul li:hover {
    background:transparent;
    color:#000000;}

#nav li:hover span a{
    color:#ffffff;}

    #nav ul li:hover ul li span span a{
    color:#ffffff;}

        #nav ul li ul li:hover ul li span span a{
            color:#ffffff;}

                #nav ul li ul li ul li:hover ul li span span a{
                    color:#ffffff;}

        #nav ul li ul li:hover span span a{
            color:#ffffff;}

            #nav ul li ul li ul li:hover span span a{
                color:#ffffff;}

                #nav ul li ul li ul li ul li:hover span span a{
                    color:#ffffff;}

#nav ul li.active a {
    background:transparent url(../images/fusion_mmiddle.png) repeat-x scroll left 1pt;
    color:#ffffff;
    text-shadow:1px 1px #000000;}

#nav ul li:hover a{
    background:transparent url(../images/fusion_mmiddle.png) repeat-x scroll left 1pt;
    color:#ffffff;
    text-shadow:1px 1px 1px #000000;}

    #nav ul li:hover ul li a{
        background:transparent;
        color:#ffffff;}

    #nav ul li ul li:hover a{
        color:#ffffff;
        width:230px;}

#nav li.active span.outer_active, #nav span.outer_active:hover, #nav ul li:hover span.outer_active {
    background:transparent url(../images/fusion_mleft.png) no-repeat scroll 0 1pt;
    height:68px;}

#nav ul li span.outer {
    height:68px;
    width:12px;
    float:left;}

    #nav ul li:hover span.outer, #nav ul li a.active:hover span.span_active, #nav ul li.active span.outer  {
        height:68px;
        width:23px;
        float:left;
        background:transparent url(../images/fusion_mright.png) no-repeat scroll 0 1pt;}

    #nav ul li span.outer, #nav ul li a.active span.span_active, #nav ul li.active span.outer  {
        height:68px;
        width:23px;}

        #nav ul li ul li:hover span.span_active {
            background:none;}

#nav span.span_active, #nav span.span_active:hover {
    height:53px;
    width:6px;
    float:left;
    background:transparent url(../images/fusion_mright.png) no-repeat scroll 0 1pt;
}

#nav ul li ul li span.span_active, #nav ul li ul li span.span_active:hover {
    height:29px;}

.outer_active {
    display:block;
    height:32px;
    float:left;}

#nav a span:hover, #nav li:hover a span, #nav li.active span, #nav li.over a span{
    color:#cccccc;
}

#nav ul li li:hover span{
    background:none;
    color:#FFFFFF;}

#nav ul li li span.span_active {
    background:none;}

/* Rounded menu top/bottoms */
#nav ul li.toparrow, #nav ul li.toparrow:hover {
    height:16px;
    line-height:25px;
    width:230px;
    background:transparent url(../images/fusion_ddmenutop.png) no-repeat scroll 0 0;}

#nav ul li.menubottom, #nav ul li.menubottom:hover {
    background:transparent url(../images/fusion_ddmenubot.png) no-repeat scroll 0 0;
    height:17px;
    line-height:25px;
    width:230px;}

javascript

И простейший скрипт, в отличие от навороченного css.

Красивый вид topnews для DLE

Украшаем вид BBcode

Выпадающее меню для DLE

Социальное меню на HTML5 and CSS3

Хак "Новые симпатичные bb-коды"

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Наш чатик

AlexPlus

iCagenda Pro v3.9.3

papandopolo9

EasyStore v1.1.0

Bizonus

YOOtheme pro 4.3.12 please!

angrand

PWT SEO 3.0.2

Nisapp

MX Awesome News v4.0.22

pepe

uhelp - Helpdesk Support Ticketing System Version V.3.3

Ares

papandopolo9,
SP PAGE BUILDER PRO V5.3.0

papandopolo9

SP Page Builder v5.3.0

papandopolo9

EasyStore v1.0.10

pepe

RSTickets! Pro 3.2.3

zafro

Easy Content Restriction Pro 5.1.0.0

drum

JMS Multi-Sites v1.3.89

san-san

RSForm! Pro Feedback Module 3.1.0

Alexand3r

HTML5 games plz
Ищу интересные игры для своего сайта. Поделюсь скриптами, шаблонами и т.д.

anons01

Akeeba Backup pro 9.9.2 upload link doesn't work

anons01

Regular labs - DB Replacer 8.0.2 please!

anons01

Logman 5.0.0 please!

anons01

Docman 5.0.2 please!

anons01

JSpeed 2.6 please!

anons01

YOOtheme pro 4.3.11 please!

Только зарегистрированные посетители могут писать в чате.

Всё для ВебМастера

Горизонтальное выпадающее меню

Наш чатик

Популярное

Навигация

Последние комментарии

Архив сайта