创建类似于Google Plus的菜单 [英] Creating a menu similar to Google Plus
问题描述
我尝试实现类似Google Plus的自适应菜单,其中主窗口大小调整后,主菜单选项被添加到更多下拉菜单中。
我目前的菜单看起来像这样:
以下是代码:
// JQuery
$(document).ready(function(){
$(a.drop-menu)。 drop-menu')toggle();
});
});
<! - HTML - >
< ul id =navigation>
< li>< a href =#class =active>首页< / a>< / li>
< li>< a href =#>关于< / a>< / li&
< li>< a href =#>日历< / a>< / li>
< li>< a href =#>论坛< / a>< / li&
< li>< a href =#>图库< / a>< / li>
< li>< a href =javascript :; class =drop-menu>更多< / a>
< ul id =drop-menu>
< li>< a href =#>联系人< / a>< / li>
< li>< a href =#>联系人< / a>< / li>
< / ul>< / li>
< / ul>
/ * CSS * /
#navigation {
list-style-type:none;
padding:0px;
margin:0px;
}
#navigation li {
display:inline-block;
}
#navigation li a:link,#navigation li a:visited,#navigation li a:active {
display:block;
width:120px;
line-height:50px;
text-align:center;
font-weight:bold;
text-decoration:none;
background-color:#27383F;
color:#CCC8C0;
}
#navigation li a:hover,#navigation li a.active {
background-color:#2C3C53;
}
#drop-menu {
display:none;
position:absolute;
padding:0px;
margin:0px;
}
#drop-menu li {
display:block;
}
,我相信这不是完美的结果..但是,相信你可以使用它作为你的起点..希望它有帮助..
I'm trying to achieve a responsive menu similar to Google Plus, where the main menu options are added to or removed from the "more" drop down as the window is resized.
The menu I have currently looks like this:
Here is the code:
// JQuery
$(document).ready(function() {
$("a.drop-menu").click(function () {
$('#drop-menu').toggle();
});
});
<!-- HTML -->
<ul id="navigation">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="javascript:;" class="drop-menu">More</a>
<ul id="drop-menu">
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
</ul></li>
</ul>
/* CSS */
#navigation {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#navigation li {
display: inline-block;
}
#navigation li a:link, #navigation li a:visited, #navigation li a:active {
display: block;
width: 120px;
line-height: 50px;
text-align: center;
font-weight: bold;
text-decoration: none;
background-color: #27383F;
color: #CCC8C0;
}
#navigation li a:hover, #navigation li a.active {
background-color: #2C3C53;
}
#drop-menu {
display: none;
position: absolute;
padding: 0px;
margin: 0px;
}
#drop-menu li {
display: block;
}
Currently, when the browser window is re-sized the menu options collapse as follows:
However, the below image is my desired result:
I'm wondering if there is a way to accomplish this without media queries? More specifically:
- How can I dynamically detect whether the window size is large enough or too small to contain the
li
tags in the main navigation on a single line? - How do I swap the
li
tags between one menu and the other?
By not using media-queries
I think you can use jQuery $( window ).width();
which will return width of browser viewport.. It should be like this:
$(document).ready(function() {
$("a.drop-menu").click(function () {
$('#drop-menu').toggle();
});
if($( window ).width() < $("#navigation > li").length * (120 + 5)){
//5px is the approximation of the gap between each <li>
var html = $("#navigation > li").last().prev().html();
$("#navigation > li").last().prev().remove();
$("#drop-menu").append(html);
}
var bigger = $("#navigation > li").length + 1;
var smaller = $("#navigation > li").length;
$( window ).resize(function() {
if($( window ).width() <= smaller * (120 + 5)){
//5px is the approximation of the gap between each <li>
var html = $("#navigation > li").last().prev().html();
if(html != undefined){
$("#navigation > li").last().prev().remove();
$("#drop-menu").prepend("<li>"+html+"</li>");
bigger = $("#navigation > li").length + 1;
smaller = $("#navigation > li").length;
}
}
if($( window ).width() >= bigger * (120 + 5)){
//5px is the approximation of the gap between each <li>
var html = $("#drop-menu > li").first().html();
if(html != undefined){
$("#drop-menu > li").first().remove();
$("#navigation > li").last().before("<li>"+html+"</li>");
bigger = $("#navigation > li").length + 1;
smaller = $("#navigation > li").length;
}
};
});
});
Check out this Fiddle, I believe it's not the perfect result.. But, I believe you can use it as your starting point.. Hope it helps..
这篇关于创建类似于Google Plus的菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!