0
在我的菜单上,当我处于移动视图时,它不会浮动,这是正确的。浮动移动视图结束后不回位
问题是当我走出移动视图时,我的课程“menu-right”向左漂浮,直到我重新加载我的页面。
这是可能的,当它出现移动视图时,“菜单权”类将自动进入浮动状态,无需重新加载页面。
我不确定它是否与CSS或我的Java脚本。
实时代码示例:http://codepen.io/riwakawebsitedesigns/pen/GgLjmL
实时代码完整视图:http://codepen.io/riwakawebsitedesigns/full/GgLjmL/
Java脚本
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 be attached to anchor element to 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 be attached to li so that mouseleave is not triggered when hover over 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,
a {
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 a {
padding: 10px 15px;
color:#fff;
text-decoration: none
}
#menu li {
position: relative;
}
#menu > li {
float: left;
}
#menu > li > a {
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 a {
display: block;
background: #000000; /* A grey background */
opacity: 0.7; /* 80% opacity */
position: relative;
z-index:100;
width: 147px;
}
#menu li li li a {
background: #000000; /* A 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 and (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 a {
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>
我都准备好了在CSS中有最大宽度。 – user4419336 2015-04-01 14:15:38
问题是,当您调整屏幕的大小像移动设备的大小,然后你回到正常的大小它doesen't无法正常工作? 这是因为当你“去”到<768px的大小的CSS改变。所以你必须添加大小> 768的css。 – 2015-04-01 14:17:17
试过它没有运气不知道什么做错了。你有什么例子? – user4419336 2015-04-01 14:27:04