Открыть меню    

Отзывчивое меню на css и jQuery

При ширине окна браузера больше 960px, курсор мышки наведен на пункт 7

при ширине окна браузера больше 960px

При ширине окна меньше 768px

при ширине окна меньше 768px

При ширине окна меньше 480px, навигация скрыта (по умолчанию)

при ширине окна меньше 480px, навигация скрыта

При ширине окна меньше 480px, навигация открыта (открывается при клике на ссылку "Открыть меню / Навигация")

при ширине окна меньше 480px, навигация открыта

HTML

    <nav class="mainNav wrap">

<a class="nShowProductsLink nShowProducts" >Открыть меню / Навигация   
    <img src='images/icon-navigation.png' width='23' height='13'>
</a>

<ul id="show_menu" class="resetlist">
        <li class="nPoly">
            <a href="#1">Пункт 1</a>
            <ul>
                <li><a href="#1">Подпункт 1</a></li>
                <!-- -->
                <li><a href="#1">Подпункт 1</a></li>
            </ul>
        </li>
        <li class="nStretch">
            <a href="#1">Пункт 2</a>
            <ul>
                <li><a href="#1">Подпункт 2</a></li>
                <li><a href="#1">Подпункт 2</a></li>
                <li><a href="#1">Подпункт 2</a></li>
            </ul>
        </li>
        <li class="nAdhesives">
            <a href="#1">Пункт 3</a>
            <ul>
                <li><a href="#1">Подпункт 3</a></li>
                <!-- -->
                <li><a href="#1">Подпункт 3</a></li>
            </ul>
        </li>
        <li class="nPost">
            <a href="#1">Пункт 4</a>
            <ul>
                <li><a href="#1">Подпункт 4</a></li>
                <!-- -->
                <li><a href="#1">Подпункт 4</a></li>
            </ul>
        </li>
        <li class="nPaper">
            <a href="#1">Пункт 5</a>
            <ul>
                <li><a href="#1">Подпункт 5</a></li>
                <!-- -->
                <li><a href="#1">Подпункт 5</a></li>
            </ul>
        </li>
        <li class="nCartons">
            <a href="#1">Пункт 6</a>
            <ul>
                <li><a href="#1">Подпункт 6</a></li>
                <!-- -->
                <li><a href="#1">Подпункт 6</a></li>
            </ul>
        </li>
        <li class="nStrap">
            <a href="#1">Пункт 7</a>
            <ul>
                <li><a href="#1">Подпункт 7</a></li>
                <!-- -->
                <li><a href="#1">Подпункт 7</a></li>
            </ul>
        </li>
        <li class="nContact">
            <a href="#1">Пункт 8</a>
            <ul>
                <li><a href="#1">Подпункт 8</a></li>
                <!-- -->
                <li><a href="#1">Подпункт 8</a></li>
            </ul>
        </li>
    </ul>

</nav>

CSS

    /* отрыть/скрыть ссылка */
.nShowProductsLink { display:none; cursor: pointer; } 
/* основные LI */
.mainNav ul     {   
    list-style-type:none; width:100%; max-width:72em; 
    margin:0 auto; position:relative; }
.mainNav li     {  
    float:left; width:25%;  text-align:center; }
.mainNav li a   {   
    float:left; width:100%; color:#fff; 
    padding:0.9em 0; font-size:0.9em;  }
/* цвета МЕНЮ */
.nPoly      { background:#12b2b9; } 
.nStretch   { background:#e38f27; } 
.nAdhesives { background:#c95774; } 
.nPost      { background:#ffcb06; } 
.nPaper     { background:#adad8b; } 
.nCartons   { background:#a7be38; } 
.nStrap     { background:#4396d1; } 
.nContact   { background:#8e96c7; } 

/* Вложенные списки */
.mainNav ul li ul { 
    display:none; z-index:99999; 
    margin:0; padding:0.5em 0 0 0; }
/* Позиционируются относительно глобального Ul */
.mainNav ul li:hover ul { 
    display:block; position:absolute; top:2.9em; 
    border-top:6px #14c8d0 solid; background: #ffffff; 
    width:100%; padding-bottom:0.6em; z-index:99999;  }
.mainNav ul li ul li { 
    float:left; width:27.3%; padding:0 3%; 
    text-align:left; background:none;  
    border:0; color:#fff;}
.mainNav ul li ul li:nth-child(3n+1) { clear:both; }
.mainNav ul li ul li a { 
    display:inline-block; text-transform:capitalize; 
    font-size:0.8em; padding:0.5em 0; color:#034ea2; }
.mainNav ul li ul li a:hover    { text-decoration:underline; }
.mainNav ul li ul li:hover      { background:none; }

/* для правильного позиционирования дочерних списков при наведении мыши на соотв-й ul */
.nStretch:hover ul      { border-top:6px #fea02c solid !important; left:0;  }
.nAdhesives:hover ul    { border-top:6px #ee688a solid !important; right:0; }
.nPost:hover ul         { border-top:6px #ffd63b solid !important; right:0; }
.nPaper:hover ul        { border-top:6px #d1d1a8 solid !important; left:0;  }
.nCartons:hover ul      { border-top:6px #c3de42 solid !important; left:0;  }
.nStrap:hover ul        { border-top:6px #4faef2 solid !important; right:0; }
.nContact:hover ul      { border-top:6px #9fa9e3 solid !important; right:0; }

/*  Позиционируем вложенные списки "лежащие" во второй строке */
.nPaper:hover ul, .nCartons:hover ul, 
.nStrap:hover ul, .nContact:hover ul { top:5.7em !important;  }

/*  MEDIA QUERIES ======= */

@media screen and (max-width: 960px)
{
    .mainNav li a { font-size:0.9em; } /* класс mainNav это общий nav  */
    .mainNav ul li:hover ul { display:none; } /* подсписки всегда скрыты */
}
@media screen and (max-width: 768px)
{
    body { font-size:84%; }
    .mainNav li { width:50%; }
}
@media screen and (max-width: 480px)
{
    .mainNav li { width:100%; }
    .mainNav li a { padding:0.9em  0; }
    .nShowProductsLink      
    {   display:block !important;  
        border-bottom:2px #fff solid; 
        color:#fff; text-align:center; 
        padding:0.9em  0; font-size:0.9em; 
        font-family:'Bitter', Arial, Helvetica, sans-serif;}
    .nShowProductsLink img      { padding-right:4px; }
    .nShowProductsLink:hover    { color:#fff; }
    #show_menu { display:none; }  /* скрываем меню */
}

@media screen and (min-width: 481px)
{
    #show_menu { display:block !important; }   /* меню всегда видно */
}

jQuery

        var state = 'none';

    $(".nShowProductsLink").click(
        function()
        {
            showhide('show_menu');
        }
    );

    function showhide(layer_ref)
    {
        if (state == 'block')
        {
            state = 'none';
            $(".nShowProductsLink").html("Открыть меню / Навигация");
        }
        else
        {
            state = 'block';
            $('#show_menu').slideDown(200);
            $(".nShowProductsLink").html("Закрыть меню / Навигация");
        }

        $("#show_menu").css({"display":state});
    }

отзывчивое меню на css и jQuery

Комментарии к статье

Добавить комментарий