[英]Responsive jQuery hamburger icon “disappears” on click
I'm making my first responsive menu from scratch. 我正在从头开始制作我的第一个响应式菜单。 My tools are jQuery, HTML, and CSS.
我的工具是jQuery,HTML和CSS。
I've got a fiddle here: http://jsfiddle.net/DznpQ/9/ 我在这里有一个小提琴: http : //jsfiddle.net/DznpQ/9/
The problem is that once you click the hamburger menu icon, it "disappears". 问题是,一旦单击汉堡菜单图标,它就会“消失”。 Inspecting the source tells a different story: The hamburger icon is still there, it's just moved so far it's no longer visible.
检查消息来源会得出一个不同的故事:汉堡包图标仍在那儿,它已经移到了不再可见的程度。
I'm unsure of why the icon is moving in the first place or I might be able to fix it. 我不确定为什么图标会首先移动,或者我可能可以修复它。 As always, thanks for the help.
与往常一样,感谢您的帮助。
HTML : HTML :
<div class="header">
<!-- Container -->
<div class="headerContainer container">
<!-- Logo -->
<div class="logo col-md-3 alpha" style="
width: 206px;
margin-right: 0;
"> <a href="/"><img id="p_lt_Logo_Logo_ucEditableImage_imgImage" src="http://placehold.it/206x63" alt=""></a>
</div>
<!--/ End Logo -->
<!-- Navigation -->
<div class="navigation col-md-9 omega">
<div class="mobile-menu">
<img src="https://cdn4.iconfinder.com/data/icons/miu/22/editor_list_view_hambuger_menu-48.png" alt="menu" class="pull-right hamburger">
</div>
<ul id="menuElem" class="CMSListMenuUL" style="display: none;">
<li class="CMSListMenuHighlightedLI"> <a class="CMSListMenuLinkHighlighted" href="/">Home</a>
</li>
<li class="CMSListMenuLI"> <a class="CMSListMenuLink" href="/About">About</a>
</li>
<li class="CMSListMenuLI"> <a class="CMSListMenuLink" href="/Contact">Contact</a>
</li>
</ul>
</div>
<!--/ End Navigation -->
</div>
<!--/ End Container -->
</div>
CSS 的CSS
ol, ul {
list-style: none;
}
.headerContainer {
position: relative;
}
.mobile-menu {
display:block;
position: absolute;
bottom: 30px;
right: 5px;
}
.hamburger:hover {
-webkit-filter: drop-shadow(3px 3px 3px #3C3C3C);
filter: drop-shadow(3px 3px 3px #3C3C3C);
}
ul.navigation {
height: auto;
}
.navigation li {
float: none;
width: 100%;
margin: 0;
}
ul.navigation a {
line-height: 40px;
}
.navigation ul {
float: none;
position: relative;
background: url("http://mcbeev.com/MBV/media/layout/background_header.jpg") repeat-x;
}
.navigation {
width: 100%;
}
.headerContainer {
background-color: #23518f;
}
}
jQuery jQuery的
jQuery(function ($) {
$('.mobile-menu').click(function () {
$('#menuElem').toggle();
});
});
Declare the top value rather than using bottom 声明最高值,而不是使用最低值
.mobile-menu {
display:block;
position: absolute;
right: 5px;
top: 18px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.