Hello, whenever we go to Google Page and click on the "more", a menu will be dropped down. I would like to have the following effect on my web site too. May I know which JavaScript library can help me to achieve the similar effect?
A:
You just add listener to click event for a "more" element:
elementRef.addEventListener("click", function() {
// listener code here
}, false);
(you can do this in any JS library if you want to). This listener should now just display (change CSS property display from none to block) another element (ie. <div id="more" />). Also you add another listener for click event, but this time for the body element (to hide menu).
Final code could looks like following:
JavaScript:
document.getElementById("toggle-more").addEventListener("click", function(e) {
document.getElementById("more").style.display = "block";
e.stopPropagation();
}, false);
document.body.addEventListener("click", function() {
document.getElementById("more").style.display = "none";
}, false);
HTML:
<span id="toggle-more">More...</span>
<div id="more">
<ul> ... </ul>
</div>
CSS:
#more {
display: none;
position: absolute;
top: 15px;
left: 150px;
}
Crozin
2010-03-13 12:44:00
+1
A:
Any JavaScript library can help you in such situations.
You may want to check out the following example, which I hope can get you going in the right direction:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Drop down demo</title>
</head>
<body style="font-family: Arial; font-size: 11px; margin: 0 auto;">
<div id="menu_bar" style="height: 25px; width: 100%; position: absolute;">
<a href="#" style="float: left; margin-right: 10px;">Menu Item 1</a>
<a href="#" style="float: left; margin-right: 10px;">Menu Item 2</a>
<a href="#" style="float: left; margin-right: 10px;">Menu Item 3</a>
<a href="#" style="float: left; margin-right: 10px;">Menu Item 4</a>
<div style="float: left;">
<a id="more_link" href="#" style="float: left;">more...</a>
<div id="more_menu" style="width: 95px; display: none;">
<a href="#" style="float: left; margin-right: 10px;">More Item 1</a>
<a href="#" style="float: left; margin-right: 10px;">More Item 2</a>
<a href="#" style="float: left; margin-right: 10px;">More Item 3</a>
<a href="#" style="float: left; margin-right: 10px;">More Item 4</a>
</div>
</div>
</div>
<div id="spacer" style="height: 30px;"></div>
Here goes the body
<script type="text/javascript">
document.getElementById('more_link').addEventListener('click', function(e) {
document.getElementById('more_menu').style.display = 'block';
e.stopPropagation();
}, false);
document.body.addEventListener('click', function() {
document.getElementById('more_menu').style.display = 'none';
}, false);
</script>
</body>
</html>
Screenshot from the above example:
Daniel Vassallo
2010-03-13 12:57:58
I pretty much love your solution. However, I realize after sub menu being shown, menu_bar's div height will also be expanded, which is not I wish to have : See http://sites.google.com/site/yanchengcheok/Home/before-click.png and http://sites.google.com/site/yanchengcheok/Home/after-click.png
Yan Cheng CHEOK
2010-03-13 15:51:48
@Yan Cheng CHEOK: That can be easily solved by giving a width and a height to the menu_bar, such as `height: 25px; width: 100%;`. Check out the updated example. (I also added a `margin: 0 auto;` to the `body` in order not to get a horizontal scroll bar).
Daniel Vassallo
2010-03-13 16:13:08
@Yan Cheng CHEOK and @Daniel Vassallo, this might be a great answer, but it might not be. Try it on all browsers, etc. etc... this is like cooking sushi at home. Might be great, might contain unknown parasites :)
Yar
2010-03-13 16:44:10
If I put "This is content." just above the java script tag, you will notice the drop down menu will push away the content.
Yan Cheng CHEOK
2010-03-13 16:48:08
@Yan Cheng CHEOK: That can be easily solved by using `position: absolute` for the `menu_bar`. Check out the updated example.
Daniel Vassallo
2010-03-13 17:11:33
@yar: You're right, but this was just an attempt to direct the OP to a working solution.
Daniel Vassallo
2010-03-13 17:14:42
+3
A:
Hey,
Google released their closure libray, I think the menu in your question is the following
http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/submenus.html
hope it helps
Cheers
denisjacquemin
2010-03-13 13:10:19
A:
Similar menus, very well documented and flexible. Only Denis' answer -- using the actual closure library -- is better, but I doubt it's as well documented.
Yar
2010-03-13 13:13:46
@Yan Chen CHEOK, you can use those arrows that face up to upvote and use the checkbox for the "accepted" answer.
Yar
2010-03-13 16:43:00
A:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
background: #fff;
font: .74em "Trebuchet MS", Verdana, Arial, sans-serif;
line-height: 1.5em;
}
/* Help Menu Section. */
a#help-menu:hover {
color: #3B6EBF;
}
#help-menu {
text-decoration: none;
}
#help-menu u {
text-decoration: underline;
}
#jsddm
{ margin: 0;
padding: 0}
#jsddm li
{ display: -moz-inline-box; /* For FF */
display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on blocks */
list-style: none;
}
#jsddm li a
{
display: block;
white-space: nowrap}
#jsddm li ul
{ margin: 0;
padding: 0;
background:none repeat scroll 0 0 #FFFFFF;
border-color:#C9D7F1 #3366CC #3366CC #A2BAE7;
border-style:solid;
border-width:1px;
text-align: left;
position: absolute;
display: none;}
#jsddm li ul li
{
float: none;
display: inline}
#jsddm li ul li a
{
padding:0.2em 0.5em;
text-decoration: none;
background: #FFFFFF}
#jsddm li ul li a:hover
{
color: #FFFFFF;
background: #3366CC}
.jsddm-seperator {
border-top:1px solid #C9D7F1;
font-size:1px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{ ddmenuitem = $(this).find('ul').eq(0).toggle();}
function jsddm_close(evt)
{
if (ddmenuitem) ddmenuitem.hide();
}
$(document).ready(function()
{
$('#jsddm > li').bind('click', jsddm_open);
//$(this).bind('click', jsddm_close);
});
</script>
</head>
<body>
<div style="text-align:center">
<ul id="jsddm">
<li><a href="#">Home</a></li>
<li> · </li>
<li><a href="#">Main Menu1</a></li>
<li> · </li>
<li><a href="#">Main Menu2</a></li>
<li> · </li>
<li><a href="#">Main Menu3</a></li>
<li> · </li>
<li><a href="#">Main Menu4</a></li>
<li> · </li>
<li><a href="#" id="help-menu"><u>Help</u><small>▼</small></a>
<ul>
<li><a href="#">Install</a></li>
<li><div class="jsddm-seperator"></div></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
</div>
</body>
Yan Cheng CHEOK
2010-03-14 06:47:17