javascript - Google liked drop down menu

alt text .png

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?

alt text http://sites.google./site/yanchengcheok/Home/google-drop-down-menu.png

Share Improve this question asked Mar 13, 2010 at 12:33 Cheok Yan Cheng 43k139 gold badges496 silver badges948 bronze badges

Add a ment |

6 Answers 6

Sorted by: Reset to default 4

Google released their closure libray, I think the menu in your question is the following

http://closure-library.googlecode./svn/trunk/closure/goog/demos/submenus.html

hope it helps

Cheers

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.

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:

Drop down demo http://img31.imageshack.us/img31/7576/menuxs.png

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;
}

alt text http://sites.google./site/yanchengcheok/Home/google-copy-cat.png

<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./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>&nbsp;&middot;&nbsp;</li>
    <li><a href="#">Main Menu1</a></li>
    <li>&nbsp;&middot;&nbsp;</li>    
    <li><a href="#">Main Menu2</a></li>
    <li>&nbsp;&middot;&nbsp;</li>    
    <li><a href="#">Main Menu3</a></li>
    <li>&nbsp;&middot;&nbsp;</li>    
    <li><a href="#">Main Menu4</a></li>
    <li>&nbsp;&middot;&nbsp;</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>

a few weeks back I had stumbled across a blog post on creating google like menu may be that could help you :

http://blog.geotitles./2011/09/creating-the-new-top-black-bar-found-in-google-and-all-its-products/

It uses jQuery but the images you have posted looks like the old google menu since the new menu is black and even this blog post is on the same new menu but it also includes the dropdown menu, so I think this might help you.

Update

Here is a blog post on creating the old menu as well, you can also check this out, but this does not have the dropdown feature which you are asking for, may be the former one is better.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Google liked drop down menu - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)