Интернет-студия W&M

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

 10-11-2016      Комментировать      ВСЕ ЗАПИСИ





Очень удобное мобильное меню, легко адаптируется под любую верстку.  При заданной ширине экрана трансформируется в кнопку. Скачать пример можно здесь

 


 

Скрипты

&tr<!--

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
                $('#nav-wrap').prepend('<div id="menu-icon"><a href="#"><b class="menu-icon">&#xf0c9;</b>&nbsp;&nbsp; КАТАЛОГ</a></div>');
                $("#menu-icon").on("click", function(){
                $("#nav").slideToggle();
                $(this).toggleClass("active");
                });
});

</script>

-->ade;

Верстка

&tr<!--

<nav id="nav-wrap">
<ul id="nav">
<li><a href="">Раздел 1</a></li>
<li><a href="">Раздел 2</a></li>
</ul>
</nav>

-->ade;

CSS

&tr<!--

/*NAV*/

#nav-wrap {position:relative;margin: 0px auto; z-index:100;width: 100%;}

#menu-icon {display:none;}

#nav {clear: both;position: relative;top: 0px;width: 100%;height: auto; margin-left: 0px; display: block;}
#nav li {float: left;margin: 10px;display: block; text-align:left;padding: 3px 21px;border-bottom: 1px solid #f8f1f1;}
#nav a, #nav ul a {font: inherit;background: none;display: inline;padding: 0;color: #545454;border: none; font-size:17px;}
#nav a:hover, #nav ul a:hover {background: none;color:#CF0D49; text-decoration:none;}

/*MOBILE*/

@media screen and (max-width: 600px) {

#nav-wrap {position:relative;margin: 0px auto; z-index:100;width: 100%;}

#menu-icon {color: color:#545454;max-width: 255px;height: 33px;cursor: pointer;display: block; font-size:100%;padding-top: 0;}
#menu-icon a {color: #545454; text-decoration:none;}
#menu-icon:hover a{color:#F931B8;}
b.menu-icon {font-family: 'FontAwesome'; font-size:110%; color:#545454; margin-top:10px;}
#menu-icon:hover b.menu-icon  {color:#F931B8;}

#nav {display:none;  clear: both;position: relative;top: 0px;max-width: 255px;z-index: 10000;padding: 10px;  background:#AAAAAA; background:rgba(221, 221, 221, 0.9);height: auto; margin-left: 0px;}
#nav li {                float: none;margin: 10px;display: block; text-align:left;padding: 3px 21px;border-bottom: 1px solid #f8f1f1;}

}

@media screen and (max-width: 400px) {

/* ensure #nav is visible on desktop version
#nav {display: block !important;}
*/
}

-->ade;





нет комментариев

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





ЗАПИСИ ИЗ БЛОГА