Выдвижное меню, с портативной кнопкой

	<script type="text/javascript">/*смена стилей для главного меню*/
        $(document).ready(function(){
	        $(".nav_but").click(function(){
			$(".nav_portable").addClass('nav_block');
			$(".sect").addClass('body_left');
			$(".nav_but_act").addClass('active');
			$(this).toggleClass("active");
		    return false;
	        });
        });
    </script>
	<script type="text/javascript">
        $(document).ready(function(){
	        $(".nav_but_act").click(function(){
		    $(".nav_portable").removeClass('nav_block');
			$(".sect").removeClass('body_left');
			$(".nav_but").removeClass('active');
			$(this).toggleClass("active");
		    return false;
	        });
        });
    </script>	

        <?php if($this->hasWidgetsOn('top')) { ?>
            <nav>
                <?php $this->widgets('top', false, 'wrapper_plain'); ?>
            </nav>
        <?php } ?>

        <?php if($this->hasWidgetsOn('top')) { ?>
            <nav>
				<div class="nav-menu">
					<a class="nav_but" title="Открыть" href="#">Открыть</a>
					<a class="nav_but_act" title="Закрыть" href="#">Закрыть</a>
				</div>
                <?php $this->widgets('top', false, 'wrapper_plain'); ?>
            </nav>
			<div class="nav_portable"><?php $this->widgets('top', false, 'wrapper_plain'); ?></div>
        <?php } ?>

@media screen and (max-width: 800px) {
    #body section { width:100% !important; }
    #body aside { display:none; }
    nav { padding:5px; height:auto; }
    nav .menu { display:none; }
    nav select { display: block; }
    #layout footer #info { display: none !important; }
}

 
.nav-menu { display: none;}
.nav_portable {display: none;}
@media screen and (max-width: 800px){	
    nav .menu { display:none; }
	.nav-menu {display:block;width: 50px; height:50px;	z-index: 20; }
	.nav_but,.nav_but_act.active {display:block; width:50px; height:50px; z-index: 500;}
	.nav_but, .nav_but_act { background: url("../images/nav_menu.png") no-repeat center center #34495e;border-right: 1px solid rgba(255,255,255,0.06);}
	.nav_but.active {display:none;}
	.nav_but_act {display:none;}
	.nav_but,.nav_but_act{text-indent:-9999px;}
    .nav_portable {}
	.nav_block {display:block;}
	.body_left {}
	.sect,.body_left,.nav_portable ,.nav_block{transition: .2s linear;}		
}
.nav_portable {background: #34495e; margin-bottom: 10px; margin-top: -10px;}
.nav_portable .menu {margin:0;}
.nav_portable ul {list-style-type: none; line-height: 30px;}
.nav_portable ul li  a{
  display: block;
  padding-left:15px;
  color: #FFF;
  text-decoration: none;
  font-weight: normal;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-transform: uppercase;
  }
.nav_portable ul li ul {margin-right: 0;}
.nav_portable ul li ul li a {text-transform: none;}
.nav_portable .menu > li.active > a { background: #2980b9 !important; }
.nav_portable .menu > li.active > a:hover{ background: #2980b9 !important; }
.nav_portable  .menu > li > a:hover {background: #27ae60 !important;}
.nav_portable  .menu > li > ul > li >a:hover {background: #27ae60 !important;}