It seems my apparent attempts at mastering the jQuery language have failed me.
I am attempting to try and get the DIV id of the UL LI select box but my alert box comes back "undefined", thus I am looking for expert help.
Here is the markup and code in question:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background: url(arrow.png) no-repeat scroll right top;
border: 1px solid rgb(170,170,170);
width: 180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
</style>
<script type="text/javascript">
window.onload = function() {
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).closest('div.select').text($(this).html());
//alert($(this).closest('div.select').attr("id"))
//alert($(this).closest('[id]').attr('id'))
//alert($(this).closest('div.select').attr('id'))
});
}
</script>
</head>
<body>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
</body>
</html>
.text($(this).html() this line messes with the DOM, and cause problems with traversal. I advice you uses other ways to accomplish the text change. Like
$(this).closest("div").contents().first().replaceWith($(this).text());
$(".select ul li").click(function(e) {
$(this).closest("div").contents().first().replaceWith($(this).text());
var id = $(this).closest('[id]').attr('id');
alert(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
$(".select ul li").click(function(e) {
$(this).closest('div.select').text($(this).html());
//alert($(this).closest('div.select').attr("id"))
//alert($(this).closest('[id]').attr('id'))
//alert($(this).closest('div.select').attr('id'))
});
Ok, what I'm 99% sure is happening is due to you detaching the element. Your setting the text() of the div.select, which is the parent of your select. That is effectively removing the li element you clicked as a child. So later when you try to do a closest it will not return anything as it's no longer a child. You will most likely need to store that information before you change the text so you have the value without having to look it up afterwards.
$(".select ul li").click(function(e) {
var $parent = $(this).closest('div.select');
$parent.text($(this).html());
alert($parent.attr('id'));
});
Related
so I'm trying to get better at using javascript and jquery, so I tried to implement a little animation. I have 2 divs in a list under each other, and my aim is, when a mouse hovers over one of the divs, it animates it's width to stretch it out, and when the mouse leaves, the div is still stretched out, only until the mouse enters another div, in which the new div will expand, and the other will return back to it's original size. I've managed to get the divs to expand and resize when entering and leaving them with the mouse, but when trying to implement a way so that only ONE div can be expanded at any time, I can never seem to get it to work.
Here's my code so far:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<style type="text/css">
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1, .d2, .d3, .d4{
background-color: yellow;
width: 210px;
}
</style>
<script>
$(document).ready(function() {
var state = 0;
var selected = 0;
console.log(state);
$(".d1, .d2").mouseenter(function(){
state++;
selected = 1;
console.log(state);
$(this).animate({
width: '400px'
});
});
$(".d1, .d2").mouseleave(function(){
state++;
console.log(state);
if (state == 2 && selected == 1) {
$(".d1").animate({
width: '210px'
});
state = 0;
selected = 0;
}
});
});
</script>
</head>
<body>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1></br></br>
<ul>
<li><div class="d1">This is some text</div></li>
<li><div class="d2">This is some text</div></li>
</ul>
</div>
</div>
</body>
</html>
You could also simplify a bit and just add/remove an active class to the hovered div.
$(document).ready(function(){
$("ul li").hover(function(){
$("ul li").removeClass("active");
$(this).addClass("active");
});
});
li {
background-color: yellow;
padding: 10px;
margin:5px;
font-size: 18px;
position: relative;
display: block;
width: 210px;
transition: all 0.5s ease;
}
li.active {
width: 500px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>This is some text</li>
<li>This is some text</li>
</ul>
</div>
</div>
Here's a solution that answers your question: https://jsfiddle.net/d8kjLgph/
I use the data-* attribute to keep track of which element that is the "big one".
Edit: I changed your original code a little bit, hope that's ok!
$(document).ready(function() {
$(".animate").mouseenter(function(){
/*
Checking that the .animate-element the mouse enters is a "small" one
*/
if($(this).attr("data-active") != "true"){
$(".animate").attr("data-active", "false"); // Reseting all divs to "small"
$(this).attr("data-active", "true"); // Keep track of which one that's active (the big one)
$(".animate:not([data-active='true']").animate({ // Animate all that's not active to "small"
width: '210px'
}, 500);
$(this).animate({ // Animate the active one to "big"
width: '400px'
}, 500);
}
});
});
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.animate{
background-color: lightgreen;
width: 210px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<ul>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
</ul>
</div>
</div>
You can use .data() to store state of element animation; if selected is 0, animate to 400px at mouseenter, set element having className beginning with "d" that is child of parent sibling to 210px
$(document).ready(function() {
$(".d1, .d2").data("selected", 0)
.mouseenter(function() {
if ($(this).data().selected === 0) {
$(this).animate({
width: '400px'
}).data("selected", 1)
.parent().siblings().find("[class^=d]")
.data("selected", 0)
.animate({
width: '210px'
})
}
})
});
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1,
.d2,
.d3,
.d4 {
background-color: yellow;
width: 210px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>
<div class="d1">This is some text</div>
</li>
<li>
<div class="d2">This is some text</div>
</li>
</ul>
</div>
</div>
I would like to attempt to add functionality to my UL LI list, such that when an LI item is clicked on, the div's text will change to the selected value of the LI click, however, nothing seems to happen.
Here is the markup and code in question:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background:url(arrow.png) no-repeat scroll right top;
border:1px solid rgb(170,170,170);
width:180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
</style>
<script type="text/javascript">
window.onload = function() {
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).find('.select').val($(this).html())
});
}
</script>
</head>
<body>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
</body>
</html>
Since the target div is at the parent level of the clicked li, you can use .closest() to target the required div element.
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).closest('div.select').text($(this).html());
});
Example : http://jsfiddle.net/DinoMyte/bvtngh57/150/
Try like this
$(".select ul li").on("click", function() {
$(this).closest("div").contents().first().replaceWith($(this).text());
})
DEMO
$(".select ul li").click(function(e) {
$(this).parents('.select').html($(this).html())
});
Please try this instead of
$(".select ul li").click(function(e) {
$(this).find('.select').val($(this).html())
});
This might help you
Use closest() function to get the parent .select, then use filter() function and condition this.nodeType == 3 to select only the text, inside the div. Replace it with value, using following.
$(".select").click(function() {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).closest('.select').contents().filter(function(){
return this.nodeType == 3;
})[0].textContent = $(this).html()
});
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background: url(arrow.png) no-repeat scroll right top;
border: 1px solid rgb(170, 170, 170);
width: 180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br>
<br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br>
<br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
Change
$(this).find('.select').val($(this).html());
to
$(this).parent().parent().html($(this).html());
window.onload = function() {
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
// Remove this code
//$(this).find('.select').val($(this).html());
// Add this line
$(this).parent().parent().html($(this).html());
});
}
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background:url(arrow.png) no-repeat scroll right top;
border:1px solid rgb(170,170,170);
width:180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
You should use extra class hide so you can control the flow of hide/show and try to give your default text a class for example default so you can target it and update it without touching the html of the select with following code :
$(this).parents('.select').find('.default').text( $(this).text() );
Hope this helps.
Snippet
$(function(){
$("body").on('click', '.select',function (e) {
$(this).find('ul li').toggleClass('hide');
});
$("body").on('click', '.select ul li', function(e) {
$(this).parents('.select').find('.default').text( $(this).text() );
});
})
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background:url(arrow.png) no-repeat scroll right top;
border:1px solid rgb(170,170,170);
width:180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
padding: 1px;
}
.select ul li.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="numbers">
<span class='default'>Select Box1</span>
<ul>
<li class="hide">1234</li>
<li class="hide">5678</li>
<li class="hide">0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">
<span class='default'>Select Box2</span>
<ul>
<li class="hide">abcd</li>
<li class="hide">efgh</li>
<li class="hide">ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">
<span class='default'>Select Box3</span>
<ul>
<li class="hide">apples</li>
<li class="hide">bananas</li>
<li class="hide">oranges</li>
</ul>
</div>
I have been searching for an answer for this question but still, my problem exists. I tried all the answers from here (StackOverflow) and from other websites but it still didn't solved my problem.
Additional Information:
There's no error on DevTools.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Test</title>
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<script src="sample.js"></script>
</body>
</html>
CSS:
/*Nav Styles*/
.nav li {
text-transform: uppercase;
list-style-type: none;
display: inline;
}
.nav a {
text-decoration: none;
color: black;
}
/*Active Menu*/
.activeMenu {
color: red;
}
JS:
var x = function(){
$('.nav li').click(function(){
//alert($(this).text()); <-- It's working
$(this).addClass('activeMenu');
return false;
});
};
$(document).ready(x);
Thanks a lot!
The issue is because your CSS rule for .activeMenu is not specific enough to override the colour set on the a element. You need to make the rule more specific:
.activeMenu a {
color: red;
}
Or set !important on it. The former is better practice.
Example fiddle
You must change your css too:
.activeMenu a {
color: red;
}
var x = function(){
$('.nav li').click(function(){
//alert($(this).text()); <-- It's working
$(this).addClass('activeMenu');
return false;
});
};
$(document).ready(function() {
x();
});
.nav li {
text-transform: uppercase;
list-style-type: none;
display: inline;
}
.nav a {
text-decoration: none;
color: black;
}
/*Active Menu*/
.activeMenu a {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
<div class="container">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
i am a new learner of javascript. so the first i don't want to use jquery to get the tab. the following is my code. but it doesn't work.how to correct my code. thank you.
.web_index{ position:relative;}
.web_index div{ width:400px; height:300px; background:#eee; position:absolute; left:30px;top:100px; }
ul li{ float: left; width:100px; height:30px; line-height:30px; list-style:none;}
<script type="text/javascript">
function clicker(){
var lier=document.getElementsByTagName("li");
var diver=document.getElementsByClassName("web_index").getElementsByTagName("div");
for(var i=0;i<lier.length;i++){
for(j=0;j<diver.length;j++){
if(i==j)
diver[j].style.display=block;
}else{
diver[j].style.display=none;
}
}
}
}
</script>
</head>
<body >
<ul>
<li onclick="clicker()" class="li01">one</li>
<li onclick="clicker()" class="li02">two</li>
<li onclick="clicker()" class="li03">three</li>
<div class="web_clear"></div>
</ul>
<div class="web_index">
<div style="display:block" >content one</div>
<div style="display:none">content two</div>
<div style="display:none">content three</div>
</div>
i want to when click one then show content one.all the content are hidden. two then show content two...
See, for your question of implementing tabs, I can suggest you to do in a better way. The same clicker function can take an argument of the ID of the DIV and you can pass it when you are calling it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Tabs</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
.web_index div {width: 400px; height: 300px; background: #eee;}
ul li{width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;}
</style>
</head>
<body>
<ul>
<li onclick="clicker(1)">one</li>
<li onclick="clicker(2)">two</li>
<li onclick="clicker(3)">three</li>
</ul>
<div class="web_index">
<div id="t1">content one</div>
<div id="t2">content two</div>
<div id="t3">content three</div>
</div>
<script type="text/javascript">
function clicker(tab){
document.getElementById("t1").style.display = "none";
document.getElementById("t2").style.display = "none";
document.getElementById("t3").style.display = "none";
document.getElementById("t" + tab).style.display = "block";
}
clicker(1);
</script>
</body>
</html>
Working
Instead of finding the index of the element occurrence, we can give a Unique ID to each. Then, functions support arguments, and that is what javascripts are for. Pass that argument and set the style using .style.display of the element.
We don't need to position the tabs as absolute, because it is not going to be hanging. And, you can set the margins using display: inline-block instead of float: left.
.web_index div {width: 400px; height: 300px; background: #eee;}
ul li {width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;}
You can rewrite the clicker() script this way:
function clicker(tab){
document.getElementById("t1").style.display = "none";
document.getElementById("t2").style.display = "none";
document.getElementById("t3").style.display = "none";
document.getElementById("t" + tab).style.display = "block";
}
So that, you can pass the ID of the DIV tag as a parameter. By modifying the style properties of the element, you can either hide or show.
You can call this in the <li> using the same onclick function but just passing another extra parameter:
<ul>
<li onclick="clicker(1)">one</li>
<li onclick="clicker(2)">two</li>
<li onclick="clicker(3)">three</li>
</ul>
Check out demo at: http://jsbin.com/welcome/22513
alt text http://sites.google.com/site/yanchengcheok/Home/google-drop-down-menu.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?
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
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;">
Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4
<div style="float: left;">
<a id="more_link" href="#" style="float: left;">more...</a>
<div id="more_menu" style="width: 95px; display: none;">
More Item 1
More Item 2
More Item 3
More Item 4
</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.com/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.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>Home</li>
<li> · </li>
<li>Main Menu1</li>
<li> · </li>
<li>Main Menu2</li>
<li> · </li>
<li>Main Menu3</li>
<li> · </li>
<li>Main Menu4</li>
<li> · </li>
<li><u>Help</u><small>▼</small>
<ul>
<li>Install</li>
<li><div class="jsddm-seperator"></div></li>
<li>FAQ</li>
<li>Contact</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.com/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.