javascript - float's not returing to position after mobile view end -
on menu when in mobile view not float correct.
problem being when come out of mobile view class "menu-right" floats left until reload page.
is possible when comes out of mobile view "menu-right" class automatically go float right out me reloading page.
i not sure if it's css or java script.
live code example: http://codepen.io/riwakawebsitedesigns/pen/ggljml
live code full view: http://codepen.io/riwakawebsitedesigns/full/ggljml/
java script
var ww = document.body.clientwidth; $(document).ready(function() { $("#menu li a").each(function() { if ($(this).next().length > 0) { $(this).addclass("parent"); }; }) $(".menu-toggle").click(function(e) { e.preventdefault(); $(this).toggleclass("menu-button"); $("#menu").toggle(); }); adjustmenu(); }) $(window).bind('resize orientationchange', function() { ww = document.body.clientwidth; adjustmenu(); }); var adjustmenu = function() { if (ww < 768) { $(".menu-toggle").css("display", "inline-block"); if (!$(".menu-toggle").hasclass("menu-button")) { $("#menu").hide(); } else { $("#menu").show(); } $("#menu li").unbind('mouseenter mouseleave'); $("#menu li a.parent").unbind('hover').bind('hover', function(e) { // must attached anchor element prevent bubbling e.preventdefault(); $(this).parent("li").toggleclass("hover"); }); $(".menu-right").removeclass("menu-right"); } else if (ww >= 768) { $(".menu-toggle").css("display", "none"); $("#menu").show(); $("#menu li").removeclass("hover"); $("#menu li a").unbind('hover'); $("#menu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { // must attached li mouseleave not triggered when hover on submenu $(this).toggleclass('hover'); }); $(".menu-right").addclass("menu-right"); } } css
body { background-color: #f5f5f5; font-family: "helvetica neue", helvetica, arial, sans-serif; } #content { margin-top: 20px; } .default-theme { background-color: #fafafa !important; background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2) !important; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2)) !important; background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2) !important; background-image: -o-linear-gradient(top, #ffffff, #f2f2f2) !important; background-image: linear-gradient(to bottom, #ffffff, #f2f2f2) !important; background-repeat: repeat-x; border: 1px solid #d4d4d4; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 0px; filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffffff', endcolorstr='#fff2f2f2', gradienttype=0); *zoom: 1; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important; } body, #menu, ul, li, { margin: 0; padding: 0; } a, a:visited { color: #003366; text-decoration: none; cursor: pointer; } #header .div1 { height: 56px; padding: 0px 30px; background: url('../img/header.png') repeat-x; min-width: 900px; } #header .div2 { color: #ffffff; padding: 18px 0px 0px 0px; float: left; } #header .div3 { font-family: arial, helvetica, sans-serif; font-size: 12px; color: #fff; text-align: right; padding: 15px 0px 0px 0px; float: right; } #header .div2 span { font-weight: bold; } .container-menu { width: 100%; margin: 0 auto; } .menu-right { float:right !important; } .menu-toggle { display: none; } #menu { list-style: none; *zoom: 1; background: rgba(0,0,0,1); background: rgba(19,19,19,1); background: -moz-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,19,19,1)), color-stop(0%, rgba(17,17,17,1)), color-stop(0%, rgba(102,102,102,1)), color-stop(0%, rgba(43,43,43,1)), color-stop(2%, rgba(44,44,44,1)), color-stop(4%, rgba(71,71,71,1)), color-stop(27%, rgba(61,61,61,1)), color-stop(100%, rgba(28,28,28,1))); background: -webkit-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); background: -o-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); background: -ms-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); background: linear-gradient(to bottom, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#131313', endcolorstr='#1c1c1c', gradienttype=0 ); } #menu:before, #menu:after { content: " "; display: table; } #menu:after { clear: both; } #menu ul { list-style: none; } #menu { padding: 10px 15px; color:#fff; text-decoration: none } #menu li { position: relative; } #menu > li { float: left; } #menu > li > { display: block; } #menu li ul { position: absolute; left: -9999px; } #menu > li.hover > ul { left: 0; } #menu li li.hover ul { left: 100%; top: 0; } #menu ul .top { background-image: url('../img/arrow-right.png'); background-position: 95% center; background-repeat:no-repeat; } #menu li li { display: block; background: #000000; /* grey background */ opacity: 0.7; /* 80% opacity */ position: relative; z-index:100; width: 147px; } #menu li li li { background: #000000; /* grey background */ opacity: 0.7; /* 80% opacity */ z-index:200; } #menu li li li a:hover, #menu li li a:hover { margin: 0px; border: 1px solid #bd4c14; background-color: #391706; } @media screen , (max-width: 768px) { #menu-header { background: rgba(0,0,0,1); background: rgba(19,19,19,1); background: -moz-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,19,19,1)), color-stop(0%, rgba(17,17,17,1)), color-stop(0%, rgba(102,102,102,1)), color-stop(0%, rgba(43,43,43,1)), color-stop(2%, rgba(44,44,44,1)), color-stop(4%, rgba(71,71,71,1)), color-stop(27%, rgba(61,61,61,1)), color-stop(100%, rgba(28,28,28,1))); background: -webkit-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); background: -o-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); background: -ms-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); background: linear-gradient(to bottom, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#131313', endcolorstr='#1c1c1c', gradienttype=0 ); width: 100%; padding-top: 2%; } #menu-header button { color: #fff; border-color: 1px solid #fff !important; margin-bottom: 15px; margin-left: 10px; } #menu { background: #000000 !important; clear: both; } #menu > li { float: none; } #menu li li { width: 100%; } #menu ul { display: block; width: 100%; } #menu > li.hover > ul , #menu li li.hover ul { position: static; } } html
<div class="container-menu"> <div id="menu-header"> <button type="button" class="menu-toggle btn btn-primary"> menu </button> </div> <ul id="menu"> <li><a href="">dashboard</a></li> <li><a href="#">catalog</a> <ul> <li><a href="">categories</a></li> <li><a href="">categories</a></li> </ul> </li> <li><a href="#">extensions</a> <ul> <li><a href="">modules</a></li> </ul> </li> <li><a href="#">sales</a> <ul> <li><a href="#" class="top">customers</a> <ul> <li><a href="#">customers</a></li> <li><a href="#">customer group</a></li> </ul> </li> </ul> </li> <li><a href="#">system</a> <ul> <li><a href="">setting</a></li> <li><a href="#" class="top">design</a> <ul> <li><a href="#">layouts</a></li> <li><a href="#">banners</a></li> </ul> </li> <li><a href="#" class="top">users</a> <ul> <li><a href="#">user</a></li> <li><a href="#">user group</a></li> </ul> </li> </ul> </li> <li class="menu-right"><a href="">logout</a></li> <li class="menu-right"><a href="">website front</a></li> </ul> </div>
you have create media screen like:
@media screen , (min-width: 769px) {}
and reset style changed with:
@media screen , (max-width: 768px) {}
@media (min-width: 769px) { h1 {color: red;} } @media (max-width: 768px) { h1 {color: green;} }<html> <head> </head> <body> <h1>color</h1> <script> </script> </body> </html>
Comments
Post a Comment