[英]Responsive Nav - How to change menu icon when clicked
I'm using this responsive menu: http://www.hongkiat.com/blog/responsive-web-nav/ 我正在使用以下自适应菜单: http : //www.hongkiat.com/blog/sensitive-web-nav/
I would like to have these two little improvements to the nav, but I can't seem to know how to do it: 我想对导航进行以下两个小改进,但是我似乎不知道该怎么做:
1: When clicked on the menu icon I want the icon to change to a different icon. 1:单击菜单图标时,我希望图标更改为其他图标。 To be precise, I just want the menu icon (the 3 lines) to flip vertical when clicked.
准确地说,我只希望菜单图标(三行)在单击时垂直翻转。 And when I hover the cursor on the flipped icon, I want to have the title: 'close menu'
当我将光标悬停在翻转的图标上时,我想要标题:“关闭菜单”
2: I would also like the menu to close when I click outside of the menu. 2:我也想在菜单外部单击时关闭菜单。 I've done what is suggested here , but the suggestion that is given also closes the menu when the menu icon is not shown.
我已经完成了这里的建议,但是当菜单图标未显示时,给出的建议也会关闭菜单。
jQuery: jQuery的:
$(function() {
var pull = $('#pull');
menu = $('.nav-top ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.stopPropagation();
e.preventDefault();
menu.slideToggle();
});
$(document).on('click',function(e){
if(!menu.is(":hidden")){
menu.slideToggle();
}
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
CSS: CSS:
a#pull{display:none}
@media all and (min-width: 150px) and (max-width: 319px) {
.nav-top ul {
display: none;
height: auto;
width: 100%
}
.nav-top li {
width: 100%
}
.nav-top a {
width: 100%;
text-align: left;
text-indent: 5px;
border-bottom: 1px solid #576979;
border-right: 1px solid #576979
}
.nav-top a#pull {
background-color: #283744;
display: block;
position: relative;
width: 100%
}
.nav-top a#pull:after {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAJklEQVQ4y2P8//8/AzUB438qmzhCDWQYeQaOJpvRZDMay0M/2QAA9B1Hzdwz85IAAAAASUVORK5CYII=)no-repeat;
content: "";
display: inline-block;
height: 30px;
position: absolute;
right: 0;
top: 10px;
width: 22px
}
}
EDIT 1: 编辑1:
JQUERY JQUERY
$(function() {
var pull = $('.pull');
menu = $('.nav-top ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.stopPropagation();
e.preventDefault();
menu.slideToggle();
});if(pull.is(':visible')){
$(document).on('click',function(e){
if(!menu.is(":hidden")){
menu.slideToggle();
}
});}
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
pull.addClass('.vertical');
}else {
pull.removeClass('vertical');}
});
});
html html
<nav class="nav-top clearfix">
<ul class=clearfix>
<li><a class="home-link" href="/">Home</a></li>
<li><a class="biography-link" href="/biography">Biography</a></li>
<li><a class="music-link" href="/music">Music</a></li>
<li><a class="gallery-link" href="/gallery">Gallery</a></li>
<li><a class="agenda-link" href="/agenda">Agenda</a></li>
<li><a class="contact-link" href="/contact">Contact</a></li>
</ul>
<a href="#" class="pull" title="Open Menu">Menu</a>
<a href="#" class="pull" title="Close Menu">Menu</a>
</nav>
CSS 的CSS
a.pull{display:none}
@media all and (min-width: 150px) and (max-width: 319px) {
.nav-top ul {
display: none;
height: auto;
width: 100%
}
.nav-top li {
width: 100%
}
.nav-top a {
width: 100%;
text-align: left;
text-indent: 5px;
border-bottom: 1px solid #576979;
border-right: 1px solid #576979
}
.nav-top a.pull {
background-color: #283744;
display: block;
position: relative;
width: 100%
}
.nav-top a.pull:after {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAJklEQVQ4y2P8//8/AzUB438qmzhCDWQYeQaOJpvRZDMay0M/2QAA9B1Hzdwz85IAAAAASUVORK5CYII=)no-repeat;
content: "";
display: inline-block;
height: 30px;
position: absolute;
right: 0;
top: 10px;
width: 22px
}
.vertical {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAeElEQVQ4jcWSwQmAMBAEB7EAidp/JRpEEQyKDwvShxeU/DYPXQiBwAxH9uDDeOB8nU4VjIngVAUO2HIFDbAbtOYIggG7TTICgyKYgAWoFei/NMAM9ArkuRfD8fx2UASxltjzAbQ5gthzpcCpQNrzwu4peS/VCbJzAb0PK1vzdF+uAAAAAElFTkSuQmCC);
content: "";
display: inline-block;
height: 30px;
position: absolute;
right: 0;
top: 10px;
width: 22px;}
You could add a class when a click is done. 单击完成后,您可以添加一个类。
$(pull).on('click', function(e) {$(pull).on('click',function(e){\npull.addClass('.vertical')
pull.addClass('。vertical')
Then you edit the vertical class : 然后,您编辑垂直类:
.yourbutton .vertical {.yourbutton .vertical {\n ...
...\n float: left;
向左飘浮;\n height: 18px;
高度:18px;\n margin-right: 5px;
右边距:5px;\n margin-top: 1px;
页边距:1px;\n width: 2px;}
宽度:2px;}
You will have to remove the class, so this code is better than the first : 您将必须删除该类,因此此代码比第一个要好:
if(!menu.is(":hidden")){if(!menu.is(“:hidden”)){\n pull.addClass('.vertical');
pull.addClass('。vertical');\n} else {
}其他{\n pull.removeClass('vertical');
pull.removeClass('vertical');\n}
}
And finally, add an attribute title : a href"#" title="Close menu" id="pull" 最后,添加一个属性标题:a href“#” title =“关闭菜单” id =“拉动”
Make the animation only if pull is visible : 仅在可见拉力时制作动画:
if(pull.is(':visible')){if(pull.is(':visible')){\n// Do your stuff
//做你的东西\n}
}
Then, your css file should be like this : 然后,您的css文件应如下所示:
#pull{display:none;}#pull {display:none;}\n\n@media only screen and (max-width : 320px) {
@仅限纯媒体屏幕和(最大宽度:320px){\n #pull{display:block}
#pull {display:block}\n}
}
Hoping it will help you ! 希望对您有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.