我正在制作一个标题导航,左侧有徽标,中间右侧的个人资料图标有一些导航链接。
有一个左侧幻灯片菜单,当窗口宽度小于700px时触发。我也在窗口调整大小事件上触发了左侧滑动菜单。在调整窗口宽度时,主导航必须切换到响应式菜单容器。但是它不能用于窗口调整大小功能。
这是我尝试过的codepen link
$("#sidebarCollapse").on('click', function () {
$('#sidebar').toggleClass('active');
});
$(".main-nav li a").on('click', function(){
$(".main-nav li a").removeClass('active');
$(this).addClass('active');
});
// Menu Add Class Left
$(".hamburger-menu").click(function(){
$(".mob-menu").toggleClass("slide-left");
});
// Menu Add Class Close
$('.mdl-layout__obfuscator').click(function(){
$(".mob-menu").removeClass("slide-left");
});
var domWidth = $(window).width();
function moveElements() {
var mobMenu = $('.mob-menu'),
$mainNav = $('.main-nav'),
respNav = $('.resp-nav'),
mainHdr = $(".global-header");
if( domWidth < 700) {
//alert(domWidth);
$('.main-nav').appendTo('.resp-nav');
}
} .
$(window).on('load resize',function() {
// alert('hi');
moveElements();
$(window).resize(function() {
moveElements();
});
});
/* ---------------------------------------------------
GLOBAL HEADER PAGE
----------------------------------------------------- */
textarea,
input,
button {
outline: none;
}
.txtlabel {
font-size: 12px;
text-align: left;
color: #706e6b;
padding-bottom: 11px;
display: block;
}
.global-header {
width: 100%;
display: block;
height: 50px;
box-shadow: 0 2px 4px 0 #e8ebf3;
-moz-box-shadow: 0 2px 4px 0 #e8ebf3;
-webkit-box-shadow: 0 2px 4px 0 #e8ebf3;
position: relative;
background-color: #f1f1f1;
}
.g-logo {
padding: 7px 24px;
float: left;
}
.m-g-logo {
display: none;
padding: 7px 20px;
float: left;
}
.hamburger-menu {
display: none;
}
.resp-nav {
margin-top: 20px;
float: left;
}
.mob-menu {
display: none;
padding: 10px;
box-shadow: 2px 0 3px 0 #b5b7bd;
-moz-box-shadow: 2px 0 3px 0 #b5b7bd;
-webkit-box-shadow: 2px 0 3px 0 #b5b7bd;
/*position: fixed;*/
position: absolute;
-webkit-transform: translateX(-285px);
-ms-transform: translateX(-285px);
transform: translateX(-285px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
background: #fff;
top: 0;
bottom: 0;
color: #333;
z-index: 9999;
width: 240px;
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
}
.profile-info {
float: left;
width: 100%;
}
.profile-icon {
width: 23px;
height: 23px;
margin: 8px;
display: block;
}
.profpic {
width: 32px;
height: 32px;
border-radius: 50%;
color: #fff;
background-color: #394961;
float: left;
margin: 5px 0px 5px 5px;
}
.profile-info span {
color: #626579;
font-size: 16px;
margin: 3px 0 0 3px;
}
.prof-name {
float: left;
width: 68%;
margin: 0 0 0 20px;
}
.prof-name a.link {
float: left;
margin: 0 10px 0 3px;
}
.prof-name a.link:first-child {
position: relative;
}
.prof-name a.link:first-child:after {
content: "|";
position: absolute;
right: -10px;
color: #9ea6a9;
}
.icon-hamburger {
height: 5px;
background-color: black;
margin: 6px 0;
width: 20px;
float: left;
border: none;
cursor: pointer;
}
.main-nav {
list-style: none;
float: left;
margin-left: 30px;
}
.main-nav li {
list-style: none;
float: left;
}
.main-nav li a {
color: #626579;
padding: 14px 30px;
display: block;
}
.main-nav li a:hover {
color: #00a0e7;
}
.main-nav li a.active {
color: #00a0e7;
border-bottom: 3px solid #00a0e7;
background-color: #eef0f6;
}
.nav-icon {
float: left;
padding: 10px;
}
.pull-right i[class^='icon-'] {
width: 32px;
height: 32px;
display: block;
}
.icon-search {
background: url("../../imgs/global-header/icn-search.svg") no-repeat 4px 5px;
}
.icon-notification {
background: url("../../imgs/global-header/icn-notification.svg") no-repeat 8px 8px;
}
.icon-profile {
background: #394961 url("../../imgs/global-header/avatar.svg") no-repeat;
position: relative;
margin-right: 30px;
border-radius: 50%;
}
.icon-profile:after {
background: url("../../imgs/global-header/page-1.svg") no-repeat;
display: block;
width: 9px;
height: 6px;
position: absolute;
content: "";
top: 14px;
right: -20px;
}
.icon-profile:before {
background: url("../../imgs/global-header/avatar-icon.svg") no-repeat;
display: block;
width: 16px;
height: 16px;
position: absolute;
content: "";
top: 7px;
right: 8px;
}
.nav-icon:hover {
background-color: transparent;
}
.nav-icon:not(.active):hover {
background-color: #eef0f6;
cursor: pointer;
}
.usage {
list-style: none;
}
.usage ul {
list-style: disc;
list-style-position: outside;
}
/* search */
.srch {
position: relative;
display: inline-block;
margin-right: 30px;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
.ui-front {
list-style: none!important;
background-color: #fff;
color: #626579;
font-size: 12px;
font-weight: 500;
width: 240px!important;
min-width: 110px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
border: 1px solid #F1F5F6;
border-radius: 4px;
padding: 10px 8px!important;
}
.ui-front li {
padding: 8px 8px!important;
cursor: pointer;
}
.slide-left {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 99999;
}
.mdl-layout__obfuscator {
background-color: transparent;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.slide-left~.mdl-layout__obfuscator {
background-color: rgba(0, 0, 0, .5);
visibility: visible;
}
.slide-menu {
position: fixed;
-webkit-transform: translateX(-285px);
-ms-transform: translateX(-285px);
transform: translateX(-285px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
background: #fff;
top: 0;
bottom: 0;
color: #333;
z-index: 9999;
width: 250px;
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
}
@media only screen and (max-width: 768px) {
.main-nav {
display: block;
width: 100%;
margin: 0;
}
.main-nav ul {
padding: 0;
}
.main-nav ul li {
width: 100%;
margin: 0;
}
.nav-icon:nth-child(3) {
display: none;
}
.g-logo {
display: none;
}
.m-g-logo {
display: block;
padding: 7px 24px;
float: left;
}
.hamburger-menu {
display: block;
}
.global-header .rightmenu {
position: absolute;
right: 12px;
}
.mob-menu {
display: block;
}
.global-header {
width: 100%;
display: block;
height: 500px;
}
}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="global-header">
<div class="mob-menu">
<div class="profile-info">
<div class="profpic"><i class="profile-icon"></i></div>
<div class="prof-name">
<span>Marvin Duncan</span>
<a href="javascript:void(0)" class="link">Profile</a>
<a href="javascript:void(0)" class="link">Logout</a>
</div>
</div>
<div class="resp-nav"></div>
</div>
<div class="pull-left">
<a href="javascript:void(0)" class="g-logo" title="Genpact Cora">Logo</a>
</div>
<nav class="main-nav">
<ul>
<li><a href="javascript:void(0)" class="active">Label 1</a></li>
<li><a href="javascript:void(0)">Label 2</a></li>
</ul>
</nav>
<div class="pull-right rightmenu">
<div class="nav-icon" title="Profile"><i class="icon-profile">☺</i></div>
</div>
<div class="mob-view">
<span class="hamburger-menu">
<button class="icon-hamburger"></button>
<a href="javascript:void(0)" class="m-g-logo" title="Genpact Cora">Logo</a>
</span>
</div>
<div class="mdl-layout__obfuscator"></div>
</div>
答案 0 :(得分:2)
问题可能是因为这条线只发生一次:
var domWidth = $(window).width();
您需要在moveElements函数中放置该行代码,以便不断检查窗口的宽度。
另外,我建议不要使用'appendTo'来移动东西。像这样移动DOM的各个部分是很棘手的,你可以很容易地搞得一团糟。最好使用CSS来移动某些东西的显示。或者,如果单独使用CSS无法实现它 - 可能有两个实例,并根据需要显示/隐藏它们。
答案 1 :(得分:0)
更改$(window).width(); to $(document).width();
我试过并且有效