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

Разметка

Много выпадающих меню полагаться на громоздкий код, посторонней разметки и javascript на работу, наше меню работает только на HTML из простых 19 строк и CSS, с некоторыми прекрасными прогрессивными функциями CSS3.

<ul id="nav">
    <li>
        <a href="#">Home</a>
    </li>

    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">The product</a></li>

            <li><a href="#">Meet the team</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>

        <ul>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>

            <li><a href="#">Sevice three</a></li>
            <li><a href="#">Sevice four</a></li>
        </ul>

    </li>
    <li>
        <a href="#">Product</a>
        <ul>
            <li><a href="#">Small product (one)</a></li>

            <li><a href="#">Small product (two)</a></li>
            <li><a href="#">Small product (three)</a></li>
            <li><a href="#">Small product (four)</a></li>

            <li><a href="#">Big product (five)</a></li>
            <li><a href="#">Big product (six)</a></li>
            <li><a href="#">Big product (seven)</a></li>

            <li><a href="#">Big product (eight)</a></li>
            <li><a href="#">Enourmous product (nine)</a></li>
            <li><a href="#">Enourmous product (ten)</a></li>

            <li><a href="#">Enourmous product (eleven)</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Contact</a>

        <ul>
            <li><a href="#">Out-of-hours</a></li>
            <li><a href="#">Directions</a></li>

        </ul>
    </li>
</ul>

CSS
Добавим красоты нашему меню и собственно функцию выпадения.
Сначало добавим обнуляющий стиль для всех бразуеров.

/*------------------------------------*\
    RESET
\*------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img{
    border:0;
}
address,caption,cite,code,dfn,th,var{
    font-style:normal;
    font-weight:normal;
}
caption,th{
    text-align:left;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:normal;
}
q:before,q:after{
    content:'';
}
abbr,acronym{
    border:0;
}

Далее добавим общий стиль для страницы, фон и шрифт.

html{
    height:101%;
    background:#fff url(/img/css/bg.gif) top left repeat-x;
}
body{
    font-family:Arial,Verdana,sans-serif;
    font-size:0.75em;
    color:#333;
    width:960px;
    margin:0 auto;
    padding:10px;
}

Теперь самое главное, посмотрите внимательно на код для меню и постарайтесь в нем разобраться.

#nav{
    float:left;
    width:100%;
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
    display:block;
}
#nav li a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
    
    text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Text shadow to lift it a little */
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
}
#nav li a:hover{
    color:#fff;
    background:#6b0c36;
    background:rgba(107,12,54,0.75); /* It'll look nice semi-transparent */
    text-decoration:underline;
}

/*--- DROPDOWN ---*/
#nav ul{
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    opacity:0; /* Set initial state to transparent */
    -webkit-transition:0.25s linear opacity; /* Make the dropdown fade-in in Webkit */
}
#nav ul li{
    padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
}
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    display:block;
}
#nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
    opacity:1; /* Fade to opaque */
}
#nav li:hover a{ /* Set styles for top level when dropdown is hovered */
    background:#6b0c36;
    background:rgba(107,12,54,0.75); /* It'll look nice semi-transparent */
    text-decoration:underline;
}
#nav li:hover ul a{ /* Override some top level styles when dropdown is hovered */
    text-decoration:none;
    -webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Set styles for dropdown when items are hovered */
    background:#333;
    background:rgba(51,51,51,0.75); /* It'll look nice semi-transparent */
    text-decoration:underline;
    -moz-transform:scale(1.05);
    -webkit-transform:scale(1.05);
}

Наше выпадающее меню на чистом css и html готово!

Добавлено: 09 Мая 2018 17:17:18 Добавил: Андрей Ковальчук Нравится 0

Добавить