Develop Reference

Making dropdown lists run function

I have adapted some code from the W3 hoverable dropdown tutorial and want to make it so that rather than following a link when clicked, it passes a value to a function. A rough snippet of the HTML code is below:
<div class="dropdown">
<button class="dropbtn">Item</button>
<div class="dropdown-content" (change)="selectChange($event)">
<a value="egg">Egg</a>
<a value="milk">Milk</a>
</div>
</div>
I want to figure out how to get the value "egg" into the JavaScript function selectChange if the user clicks on that box, but currently, the boxes are not clickable and don't do anything. I would like to avoid using a <select> tag if possible.
Here is the W3 link I got the structure of this code from:
https://www.w3schools.com/howto/howto_css_dropdown.asp

You've tagged this with angular, so I'm assuming you're using that framework. If that's the case, just use (click)="function()".
<div class="dropdown">
<button class="dropbtn">Item</button>
<div class="dropdown-content">
<a (click)="selectChange('egg')">Egg</a>
<a (click)="selectChange('milk')">Milk</a>
</div>
</div>

Probably the best solution
How about an eventListener to all the links in the dropdown in Javascript that checks if when a link was clicked and then performs the function with the value of the element that was clicked?
Probably the easiest solution
Or maybe for just a few elements or if you don't feel like/don't know how to use an eventListener for this could always use some simple onclick events with a parameter.
function selectChange(selected)
{
//not sure what you want to do now
console.log(selected);
alert(selected);
}
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content span {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content span:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<div class="dropdown">
<button class="dropbtn">Item</button>
<div class="dropdown-content">
<span onclick="selectChange('egg')">Egg</span>
<span onclick="selectChange('milk')">Milk</span>
</div>
</div>
*In this example a replaced the a-tags with span as you probably shouldn't use an anchor-tag without a href.

Javascript Content doesn't display until second click

When I first load the page it takes two clicks to show the content but then after that, every click will either show or hide. So it works... just not right away.
function navClick() {
var content = document.querySelector('.dropdown-content');
if (content.style.display == 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
};
.dropbtn {
position: relative;
float: right;
font-size: 35px;
color: #fff;
margin-top: -50px;
padding-bottom: 15px;
;
margin-right: 30px;
cursor: pointer;
z-index: 2;
display: nne;
}
<a class="dropbtn" onclick="navClick()"><i class="ion-ios-menu"></i></a>
<div class="dropdown col">
<ul class="dropdown-content">
<li>Guitars</li>
<li>Drums</li>
<li>Amps</li>
<li>Gear</li>
<li>Featured</li>
<li class="find-us">Find Us</li>
</ul>
</div>
What is happening here and how can I make the function work the first time a user clicks?

The problem is that content.style.display isn't defined, so it isn't none when you click, so it is set as none, next time through it is none so it changes to block. I would recommend using classList.toggle instead though:
function navClick() {
var content = document.querySelector('.dropdown-content');
content.classList.toggle('hidden');
};
.hidden {
display: none;
}
<a class="dropbtn" onclick="navClick()">Toggle Menu</a>
<div class="dropdown col">
<ul class="dropdown-content">
<li>Guitars</li>
<li>Drums</li>
<li>Amps</li>
<li>Gear</li>
<li>Featured</li>
<li class="find-us">Find Us</li>
</ul>
</div>

I think it happens because ul tag doesn't have style attribute, so you can add it as follow:
<ul class="dropdown-content" style="display: block;">
You can also change in css:
display: nne;
to
display: none;

Hide CSS dropdown menu with Javascript

I have a dropdown that works with CSS. I want it to disappear when an item in the dropdown is clicked, but still function correctly after words.
Here is what I have so far:
$("span").click(function(){
$(this).parent().hide();
$("#text").html("Try hovering over it again. Now it's broken, because the display attribute was set for the element.");
});
.dropDownContainer{
display: inline-block;
}
.dropDown{
display: none;
padding-left: 6px;
background-color: black;
color:white;
position: absolute;
}
.dropDownContainer:hover .dropDown {
display: block;
}
span{
cursor:pointer;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropDownContainer">
hover over this
<div class="dropDown">
this is the dropdown<br><br>
click <span>this</span> to close drop down.
<br><br>
It doesn't work.
</div>
</div>
<div id="text">
</div>

You should add a timeout to remove the display none right after you hide. so the cursor wont be positioned in a way it will automatically reopen (on hover this) so its fine.
$("span").off().click(function(){
var dropdown = $(this).parent();
dropdown.hide();
setTimeout(function(){dropdown.removeAttr('style');}, 300);
$("#text").html("Try hovering over it again. Now it's broken, because the display attribute was set for the element.");
});

You didn't have any event handler to hover and open it first. If you close or open something with CSS, you should use CSS to open or close it as well, same goes for JS/jQ, otherwise they may conflict.
SNIPPET
$(".dropDownHeader").on('mouseenter', function() {
$(".dropDownContainer").show();
$("kbd").on("click", function() {
$('.dropDownContainer').hide();
});
});
.dropDownContainer {
display: none;
padding-left: 6px;
background-color: black;
color: white;
position: absolute;
}
.dropDownHeader:hover .dropDown {
display: block;
}
kbd {
cursor: pointer;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="dropDownHeader">
<h3>Hover over this</h3>
</header>
<div class="dropDownContainer">
<p>This is the dropdown</p>
<p>Click <kbd>this</kbd> to close drop down.</p>
<p>It doesn't work.</p>
</div>
<article id="text">
</article>

I have updated your code a bit see this fiddle: https://jsfiddle.net/dLcLoggx/1/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropDownContainer">
<span class="trigger">hover over this</span>
<div class="dropDown">
this is the dropdown<br><br>
click <span>this</span> to close drop down.
<br><br>
It doesn't work.
</div>
</div>
<div id="text">
</div>
.dropDownContainer{
display: inline-block;
}
.dropDown{
display: none;
padding-left: 6px;
background-color: black;
color:white;
position: absolute;
}
span{
cursor:pointer;
color: red;
}
$(".dropDown span").click(function(){
$(this).parent().slideUp();
});
$("span.trigger").hover(function(){
$('.dropDown').slideDown();
});

Change color of the text in navigation bar when hover

I want the text of the navigation bar to change color when hover. What's wrong with my codes?
HTML
<div class="nav">
<ul class="pull-left">
<li>Ride</li>
<li>Drive</li>
</ul>
<ul class="pull-right">
<li>find a city</li>
<li>help</li>
<li>sign in</li>
</ul>
</div>
CSS: for the css part, im not sure when to select 'a' or when to select 'li'
.nav a {
padding: 14px 10px;
text-transform: uppercase;
font-family: Avenir;
font-size: 14px;
font-weight: bold;
color: black;
text-decoration: none;
}
.nav li {
display: inline;
}
.nav {
padding-top: 30px;
padding-right: 30px;
}
.add {
color: maroon;
}
JS
$(document).ready(function() {
$('.nav').hover(function() {
$('a').addClass('add')
}, function() {
$('a').removeClass('add')
});
});
THANKS A LOT!

No need for Javascript, you can simply use CSS for this:
You can simply try add a css style for nav> a>hover like this:
.nav a:hover {
color: maroon;
}
https://jsfiddle.net/Lv3tv5no/

Give following way using class.
Because first you have given color on element then you are trying to add color using class. So, it will not replace color of element.
Instead of it give color using class to anchor tag. like here using .black class.
$(document).ready(function() {
$('.nav').hover(function() {
$('a').addClass('add')
}, function() {
$('a').removeClass('add')
});
});
.nav a {
padding: 14px 10px;
text-transform: uppercase;
font-family: Avenir;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.black{
color: black;
}
.nav li {
display: inline;
}
.nav {
padding-top: 30px;
padding-right: 30px;
}
.add {
color: maroon;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<ul class="pull-left">
<li><a class="black" href="#">Ride</a></li>
<li><a class="black" href="#">Drive</a></li>
</ul>
<ul class="pull-right">
<li><a class="black" href="#">find a city</a></li>
<li><a class="black" href="#">help</a></li>
<li><a class="black" href="#">sign in</a></li>
</ul>
Note: There is no need of JQuery to change color you can do it using css only. using on :hover

If you really insist to use Jquery to hover your menus, your JS code should be like:
$('.nav li a').hover(function(){
$('li a.add').removeClass('add');
$(this).addClass('add');
}, function(){
$(this).removeClass('add');
});
Your fiddle.
Note: I used !important in .add because color: #000; was already set your menus in .nav a.

Quick Solution:
CSS selectors give you the power to do this. There's no need for Javascript / JQuery.
.nav:hover {
color:maroon;
}
Explaination:
The above code can be broken down into two parts:
The first is the CSS selector: it selects all elements with a class of nav, while they are being hovered on by the user.
The second is the area inside the brackets. You can change any properties of the element here, and they will change when it is hovered and change back when it isn't.
CSS Selectors:
Also, here's a definition of some selectors, just to clear up confusion:
.nav:hover selects all nav elements that are hovered.
.nav a:hover selects <a> tags in the elements with the class of nav while they are hovered.
.a:hover selects all <a> tags when they are hovered.
.nav:hover a selects all <a> tags in an element with a class of nav while that element has hover.
Also try :active for elements that are being clicked / experiencing a mousedown event.

You should use !important to override the color of a in add class.
.add {
color: maroon !important;
}
BTW You can do it using only css like following.
.nav:hover a {
color: maroon;
}

Google liked drop down menu

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.