Drop down javascript issues

Drop down javascript issues - javascript

Hello fellow stackoverflow users,
I seem to be having some issues trying to get my drop down menu to work and I'm pretty sure it is my javascript that isn't working properly. As of right now, with what I have - works when clicking the <li> element to open up the <ul> menu and stays in an active state, however, you have to click the <li> for it to close and the active state stays on rather than goes inactive like i need it too...So my questions at hand is where am I going wrong? I am still fairly new to javascript and any help would be greatly appreciated.
Requirements:
1.) on click make active and open menu
2.) either on click again on element or anywhere on page for that matter, menu closes and goes inactive.
This is what I have so far: DEMO
HTML:
<div class="top_l">
<li>Nav <span>▼</span>
<ul> Title
Title
Title
</ul>
</li>
</div>
JS:
$(document).ready(function () {
$('.top_l li').click(function () {
$('.top_l li').addClass('active');
$('.top_l li ul').slideToggle();
});
});
CSS:
.top_l {
width: 340px;
height: 60px;
float: left;
}
.top_l li {
height: 32px;
padding: 8px 12px 0 12px;
margin: 10px 0 0 6px;
border: 1px solid transparent;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
float: left;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
list-style: none;
color: #A4A4A4;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 2px 2px 3px #000;
position: relative;
cursor: pointer;
}
.top_l li span {
font: 14px Arial, Helvetica, sans-serif;
}
.top_l li:hover, .top_l li.active {
color: #FFF;
border: 1px solid #444;
}
.top_l li ul {
width: 120px;
height: 120px;
background: #222;
border: 1px solid #444;
-moz-box-shadow: inset 0 0.1em 0.4em 0.1em #000;
-webkit-box-shadow: inset 0 0.1em 0.4em 0.1em #000;
box-shadow: inset 0 0.1em 0.4em 0.1em #000;
display: none;
position: absolute;
top: 22px;
left: 4px;
}
.top_l li ul a {
width: 118px;
height: 28px;
padding: 10px 0 0 0;
background: red;
float: left;
color: #FFF;
font: 14px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
}

You never remove the class on second click.
Check if it's active with .hasClass() and if so, remove it with .removeClass().
$('.top_l li').click(function () {
if($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
$('.top_l li ul').slideToggle();
});
Edit
Second part of request, to make the list close when you click anywhere on the page. Try this:
$(document).ready(function () {
$('.top_l ul').click(function (e) {
$('.top_l ul').addClass('active');
$('.top_l ul li').slideToggle();
});
$(document).click(function() {
$('.top_l ul li').slideUp();
});
$('.top_l ul,.top_l li').click(function(e) {
e.stopPropagation();
});
});

Related

Li element not remaining selected on the click of it

I have created an li item with Html.ActionLink which renders ultimately as an anchor tag. I have applied CSS for hover and it works perfectly fine.
Now I need to highlight the li box when I click on it. I have used jQuery but that doesn't seem to work. I have checked the debugger tools and there doesn't seem to be any errors. So I guess it's the case that the class is not getting applied. I'm Not sure what the problem is. Please see my code below.
$(document).ready(function() {
$('#navcontainer ul li a').click(function() {
$('.highlightMenu').removeClass('highlightMenu');
$(this).addClass('highlightMenu');
});
});
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top: 40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
/*height: 50px;
width:150px;*/
border: 5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom: 5px solid #009ddc;
border-top: 5px solid #009ddc;
z-index: 0 !important;
padding: 0;
background: #fff;
color: #24387f !important;
}
#navcontainer li a:hover {
color: #fff !important;
background-color: #009ddc;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 3em 1em 1em;
color: #24387f !important;
font-size: larger;
font-weight: bold;
}
.highlightMenu {
color: #fff !important;
background-color: #009ddc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
<ul class="nav navbar-nav navbar-left text-center">
<li>#Html.ActionLink("Team Management", "Team", "Admin", null, null)</li>
<li>#Html.ActionLink("User Management", "UserProfile", "Admin", null, null)</li>
</ul>
</div>

You should read about CSS Specificity: your .highlightMenu {} selector will never be applied, because .#navcontainer ul li {} selector is more specific. Prefer Class selectors, check out BEM methodology.
From MDN about !important:
Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.
If you want to set .highlightMenu class to <li> when clicking on <a>, you could use jQuery .closest() for it.
If you add list items dynamically, you could use Event Delegation.
I've cleaned your code and rewritten it in BEM-style with the fixes, check out:
$('.nav').on('click', '.nav__link', function() {
$('.nav__item_selected').removeClass('nav__item_selected');
$(this).closest('.nav__item').addClass('nav__item_selected');
});
.nav {
display: block;
list-style-type: disc;
padding-top: 40px;
}
.nav__item {
display: inline-block;
border: 5px solid #009ddc;
padding: 0;
background: #fff;
color: #24387f;
}
.nav__item:hover, .nav__item_selected {
color: #fff;
background-color: #009ddc;
}
.nav__link {
display: inline-block;
text-decoration: none;
padding: 0.2em 3em 1em 1em;
color: #24387f;
font-size: larger;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="nav__item">
<a class="nav__link" href="#">Team Management</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">User Management</a>
</li>
</ul>

I have changed a little bit your CSS and your script.
Now the new class is added correctly to the elements.
Please, have a look at https://fiddle.jshell.net/mh2gqmju/
All the best.

What you are doing wrong is targeting the hyperlink, while you need to highlight the list-item only.
But now, if you correct your code to target the list-item in the list in place of the hyperlinks, you won't be able to see changes on the screen. (You would be able to see the classes toggling in the browser's developer tools though, obviously).
Why so? Because the hyperlink inside the list-item is hiding all the changes you want to see when the list-item gets clicked.
I added one more CSS property to the .highlightMenu in order to make you notice the changes.
See yourself:
JavaScript is modified to target the list-items, not hyperlinks within the ul in #navcontainer
.highlightMenu carries one extra CSS property now (outline), to notice the style changes on the click event.
$(document).ready(function() {
$('#navcontainer ul li').click(function() {
$('.highlightMenu').removeClass('highlightMenu');
$(this).addClass('highlightMenu');
});
});
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top: 40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
/*height: 50px;
width:150px;*/
border: 5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom: 5px solid #009ddc;
border-top: 5px solid #009ddc;
z-index: 0 !important;
padding: 0;
background: #fff;
color: #24387f !important;
}
#navcontainer li a:hover {
color: #fff !important;
background-color: #009ddc;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 3em 1em 1em;
color: #24387f !important;
font-size: larger;
font-weight: bold;
}
.highlightMenu {
color: #fff !important;
background-color: #009ddc;
outline: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
<ul class="nav navbar-nav navbar-left text-center">
<li>#Html.ActionLink("Team Management", "Team", "Admin", null, null)</li>
<li>#Html.ActionLink("User Management", "UserProfile", "Admin", null, null)</li>
</ul>
</div>
I hope it helped.

For a quick and easy hack which allows elements to respond when clicked but which does not require any scripting:
add the tabindex="0" attribute to the element
apply styles to the element, using the :focus pseudo-class
Working Example:
li {
display: inline-block;
width: 100px;
height: 100px;
color: rgb(227, 227, 227);
background-color: rgb(127, 127, 127);
text-align: center;
vertical-align: top;
}
li:nth-of-type(1):hover {
color: rgb(255, 255, 0);
background-color: rgb(255, 0, 0);
}
li:nth-of-type(1):focus {
color: rgb(255, 255, 255);
background-color: rgb(0, 127, 0);
}
li:nth-of-type(2):hover {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
}
li:nth-of-type(2):focus {
color: rgb(255, 255, 255);
background-color: rgb(127, 127, 255);
}
<ul>
<li tabindex="0">
Red on<br />Hover
<br /><br />
Green on<br />Click
</li>
<li tabindex="0">
Yellow on<br />Hover
<br /><br />
Blue on<br />Click</li>
</ul>

The reason I believe your code might not be working is this line
$('#navcontainer ul li a').click(function()
You have included the anchor "a" on the selector eventhough you want to be highlighting the "li" tag. It should be more like this:
$('#navcontainer ul li').click(function()
I have checked this on fiddle.jshell and it seems to fix the problem.

<code>
$(document).ready(function() {
$(document).on('click', '#navcontainer ul li a', function () {
$('.highlightMenu').removeClass('highlightMenu');
$(this).addClass('highlightMenu');
});`enter code here`
});
</code>
<br>
Please use the above added code i believe it's good for query..

Your code is correct ... You just need to modify your .css a bit.
Old css :-
padding: .2em 3em 1em 1em;
Changed to :-
padding: 2px 1px 1px 1px ;
See the screen shot
$(document).ready(function() {
$('#navcontainer ul li a').click(function() {
$('.highlightMenu').removeClass('highlightMenu');
$(this).addClass('highlightMenu');
});
});
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top: 40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
/*height: 50px;
width:150px;*/
border: 5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom: 5px solid #009ddc;
border-top: 5px solid #009ddc;
z-index: 0 !important;
cursor:pointer;
padding: 0;
background: #fff;
color: #24387f !important;
}
#navcontainer li a:hover {
color: #fff !important;
background-color: #009ddc;
}
#navcontainer ul li a {
text-decoration: none;
padding: 2px 1px 1px 1px ; /*padding: .2em 3em 1em 1em;*/
color: #24387f !important;
font-size: larger;
font-weight: bold;
}
.highlightMenu {
color: #fff !important;
background-color: #009ddc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
<ul class="nav navbar-nav navbar-left text-center">
<li><a> Team Management </a></li>
<li><a>User Management</a></li>
</ul>
</div>

I made some changes to css and jquery
$(document).ready(function() {
$('#navcontainer ul li').click(function(e) {
e.preventDefault(); // Remove this line please, just for this example
$(this).addClass('highlightMenu').siblings().removeClass('highlightMenu');
});
});
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top: 40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
/*height: 50px;
width:150px;*/
border: 5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom: 5px solid #009ddc;
border-top: 5px solid #009ddc;
z-index: 0 !important;
padding: 0;
background: #fff;
color: #24387f !important;
}
#navcontainer li:hover {
color: #fff !important;
background-color: #009ddc;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 3em 1em 1em;
color: #24387f !important;
font-size: larger;
font-weight: bold;
}
#navcontainer ul li.highlightMenu {
color: #fff !important;
background-color: #009ddc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
<ul class="nav navbar-nav navbar-left text-center">
<li>Team Management</li>
<li>User Management</li>
</ul>
</div>

changing li class on click

Having trouble changing the class for a li using javascript.
html
<ul id="mainmenu" style="width:130px">
<li class="mainmenudrop">Contact us
</li></ul>
css
#mainmenu {
list-style: none;
margin-left: 35px;
display: block;
}
#mainmenu li {
float: left;
padding: 3px 3px 3px 3px;
position: relative;
margin-right: 15px;
margin-top: 1px;
border: none;
cursor: default;
z-index: 999;
display: hidden;
}
This is the class I want to change:
#mainmenu li:hover {
border: 1px solid #aaa;
background: #fffff;
border-radius: 2px 2px 0px 0px;
padding: 2px 2px 2px 2px;
display: hidden;
}
rest of css
#mainmenu li a {
font-family: Verdana, Arial;
font-size: 12px;
color: #444444;
text-decoration: none;
display: block;
}
#mainmenu li:hover a {
color: #333333;
}
#mainmenu li .drop {
padding: 1px 20px 2px 4px;
background: url("../images/arrow2.gif") no-repeat right 4px ;
}
#mainmenu li:hover .drop {
background: url("../images/arrow.gif") no-repeat right 4px;
}
js (wanting to use)
$(#mainmenu li:hover).click(function(){
$(this).removeClass('menuhoverswap');
$(this).addClass('menuhoverswap');
});
id to swap
#menuhoverswap {
border: 1px solid #aaa;
}
Normally would be ok doing it but cant get my head around it as I have done the css for the menu in a different markup, referring css to mainmenu then li rather then giving the li a class of its own.

It's confusing what you are trying to achieve, but here is what i think you want to try.
http://jsfiddle.net/ccx9o55s/2
$(".mainmenudrop").on("mouseenter", function(e){
$(this).addClass("menuhoverswap");
});
$(".mainmenudrop").on("mouseleave", function(e){
$(this).removeClass("menuhoverswap");
});

UPDATED
Do you want to add the class on hover only?
$('.drop').hover(
function() {
$(this).addClass('selected');
}, function() {
$('.drop').removeClass('selected');
});
Here the full working example with your code.

Radio Toggle Button Issue

I have a radio type Toggle buttons. There are Three buttons and option to select only one button at a time. But the problem is buttons always remain selected(I know radio button don't have option to unchecked ). There is no Option to Unchecked all.
I would like to Do something like this:
If any selected button clicked again it will Unchecked . But if not clicked on the selected button it will work same what it is in current.
Is this possible to make? Sorry for bad English
Here is Demo link: Js Fiddle
HTML
<div style="margin:0px auto; margin-top:100px; width:960px;">
<a href="#">
<span class="toggleButtonRadio normal">toggle Radio button</span>
</a>
<a href="#">
<span class="toggleButtonRadio normal">toggle Radio button</span>
</a>
<a href="#">
<span class="toggleButtonRadio normal">toggle Radio button</span>
</a>
</div>
CSS
* {
margin: 0;
padding: 0;
border: 0px;
}
body {
background: #fafafa;
font-family: Helvetica, Arial, sans-serif;
font-size: 0.813em;
color:#333333;
}
a {color:#737373;text-decoration:none;
}
a:link { text-decoration: none;outline: none;
}
a:visited {text-decoration: none;
}
a:hover {color:#454545;
}
a:active {text-decoration: none;
}
ul {list-style: none; text-decoration: none;
}
ol {list-style-position: inside; color:#333333;padding:12px 10px 25px 15px;font-size: 1.07em;}
ol, li {padding-bottom:8px;}
img {}
em {color: #737373; font-weight:300;}
h1 {color: #737378; margin:20px 5px 20px 0px; font-size:2.4em; text-transform:uppercase;letter-spacing:1px; font-weight:100; text-shadow:1px 1px 1px #fff; }
h2 {color: #454545; margin:10px 5px 0px 0px;}
h3 {color: #454545; margin:10px 5px 0px 0px;}
h4 {color: #454545; margin:10px 5px 20px 0px; font-size:1.2em; width:98%; border-bottom:1px solid #eee;padding-bottom:10px;}
h5 {color: #454545; margin:10px 5px 0px 0px;}
h6 {color: #454545; margin:10px 5px 0px 0px;}
p { color:#333; font-size:1.154em; margin:5px 10px 10px 0px; padding-bottom:10px;line-height:140%;}
hr { border: 0; clear: both; display: block; width: 100%; background-color: #bbbbbb; height: 1px; margin: 5px 0px;
}
select {
color: #454545;
}
.toggleButtonRadio , .toggleButton {
background: #e1e1e1;
text-decoration: none;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: .769em;
font-weight: 900;
color: #454545;
text-transform: uppercase;
text-decoration: none;
padding: 5px 10px;
-webkit-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(64, 64, 64, .5);
box-shadow: 0px 0px 3px 0px rgba(64, 64, 64, .5);
}
.toggleButtonRadio:hover, .toggleButton:hover{
background:#d4d4d4;
}
.toggleButtonRadio.active , .toggleButton.active{
background:#90bf00;
color:#fff;
}
.active:hover{
background:#7ca600;
}
js
$('.toggleButtonRadio').click(function(){
$('.toggleButtonRadio').removeClass("active");
$(this).toggleClass("active");
});

I have solved your problem with a simple IF ELSE statment:
JQuery
$('.toggleButtonRadio').click(function () {
if ($(this).hasClass('active')) {
$(this).removeClass("active");
} else {
$('.toggleButtonRadio').removeClass("active");
$(this).addClass("active");
}
});

$('.toggleButtonRadio').click(function(){
$('.toggleButtonRadio').not(this).removeClass("active");
$(this).toggleClass("active");
});
This should do what you want, since it removes the active class on all siblings (hence the .not(this). Then the clicked button's active class is toggled on or of.
Edit: changed $(this) to this, its simpler.

How could I make a menu dropdown on click

how could I make my menu drop down when i click on it instead of hover?
I want to be able to click on .logo and have the ul dropdown. and to also hide the menu when i click on it again. The div inside .logo is just a triangle pointing down.
html code:
<div id='Logo_dropdown'>
<ul>
<li class='logo'><a href='#'><div></div></a></li>
<ul>
<li><a href='#upload'><span>Upload Logo</span></a></li>
<li><a href='#Edit'><span>Edit Logo</span></a></li>
</ul>
</div>
CSS code:
#Logo_dropdown ul {
padding: 0;
margin-left:auto;
margin-right:auto;
position:absolute;
top: 50%;
margin-top: -30px;
font-size:14px;}
#Logo_dropdown li {
margin: 0;
padding: 0;}
#Logo_dropdown a {
margin: 0;
padding: 0;
}
#Logo_dropdown ul {
list-style: none;
}
#Logo_dropdown a {
text-decoration: none;
}
#Logo_dropdown {
height: 50px;
position:absolute ;
background: #FCFCFC;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
left:200px;
opacity:0.9;
filter:alpha(opacity=90);
padding-left:1%;
padding-right:auto;
width: 190px;
/* background-color:#F3F3F3 ; /*color for Nav Menu Bar
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);*/
width: 140px;
z-index:1;
}
#Logo_dropdown > ul > li {
float: left;
position: relative;
left:140px;}
#Logo_dropdown > ul > li > a {
color: #999;
font-family: Verdana, 'Lucida Grande';
font-size: 12px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#Logo_dropdown > ul > li > a:hover {
color:#2bafb8; /*color nav menu bar when mouse hovers*/
}
#Logo_dropdown > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 80%;
margin-left: -90px;
width: 250px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
width:100px;
}
#Logo_dropdown > ul > li:hover > ul {
opacity: 1;
top: 95px; /*position of hover li*/
z-index:1;
overflow: visible;
}
#Logo_dropdown > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#Logo_dropdown > ul ul > li {
position: relative;
overflow: visible;
}
#Logo_dropdown ul ul a {
color: #2bafb8;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#Logo_dropdown ul ul a:hover {
background-color: #f0f0f0;
}
#Logo_dropdown ul ul a:hover {
background-color: #2bafb8;
color: #f0f0f0 !important;
}
div{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #CCC;
}

You can use simply toggle() to view the dropdown :)
I want to be able to click on .logo and have the ul dropdown
Use this :
$('.logo').click(function () {
$('#logodropdown ul.second').toggle();
}
This way, it will show it if hidden, and hide it if visible. You can also set some speed if you want, inside the parathesis as toggle(time in milliseconds).
And please change the second ul to <ul class="second"> as the code might misunderstand your approach and hide both of the lists in the #logodropdown. This would be a good approach to what you want to happen! Or even use a class to differentiate between both the lists.
You can use CSS to do some stuff like :active or :focus. But they won't cause a change in the properties of other elements. That's where you need a help of jQuery. :)

For click you will need to use Javascript, as there is no click event handling in CSS.

What comboBox or dropDownList is this one?

I'm looking to create a similar combobox or dropdown list like this where the box containing the selection items pops up when "Gold coast" or "Newest" button is click on the right side of the following page:
Deal Zoo
It seems to have a very slick look and feel and I wonder where to get the Javascript or ASP .Net component for this?

I'm the creator of Deal Zoo. Happy to help you out with the dropdown styling. It's a combination of javascript/jquery, css and plain ol' HTML to achieve the result.
You'll need to make sure you have the Jquery library. I use the google hosted version.
The HTML is:
<dl class="dropdown">
<dt><span>Newest<span class="icon"></span></span></dt>
<dd>
<ul style="display: none; ">
<li>Newest</li>
<li>Cheapest</li>
<li>Most Popular</li>
<li>Ending Soon</li>
</ul>
</dd>
</dl>
The CSS is (adapt as needed, the images would obviously need to be created)
.dropdown {
position: relative;
width: 200px;
}
.dropdown dt a {
display: block;
border: 1px solid #A3CFE4;
color: #585858;
background-color: #ececec;
background-image: -moz-linear-gradient(center top, #fefefe, #e9e9e9);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#e9e9e9));
border-style: solid;
border-color: #ccc;
border-width: 1px;
font-size: 11px;
font-weight: bold;
line-height: 11px;
padding: 5px 0 6px 5px;
text-shadow: 0 0 1px #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
}
.dropdown dt a:hover {
border-color: #b3b3b3;
background-color: #d7d7d7;
background-image: -moz-linear-gradient(center top, #f0f0f0, #dadada);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f0f0), to(#dadada));
}
.dropdown dt a:active {
color:#454545;
background: #ccc;
border-color: #bbb;
}
.dropdown dt a span {
cursor: pointer;
padding: 4px 5px 5px;
}
.dropdown dt a span .icon {
background: url(/images/dropdown-arrow.png) no-repeat scroll right center;
width: 14px;
height: 10px;
padding-left: 15px;
}
.dropdown dd ul {
display: none;
list-style: none;
position: absolute;
right: 0px;
top: 0px;
width: auto;
min-width: 170px;
background: white;
-webkit-box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
-moz-box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 4px 0px;
z-index: 100;
font-size: 12px;
}
.dropdown dd ul li a {
padding: 2px 10px 2px 20px;
display: block;
color: #333;
}
.dropdown dd ul li a:hover {
color: #fefefe;
background: #3296df;
}
.dropdown dd ul li a.selected {
background: url(/images/tick.png) left 7px no-repeat;
font-weight: bold
}
.dropdown dd ul li a.selected:hover {
background-color: #3296df;
background-position: left -53px;
color: #fefefe;
}
The Javascript is:
$(document).ready(function (){
$(".dropdown dt a").click(function(e) {
e.preventDefault();
$(this).parents(".dropdown").children("dd").children("ul").toggle();
});
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
});

We Keep Coding

JavaScript is the programming language of the Web.

Drop down javascript issues - javascript

Related

Li element not remaining selected on the click of it

changing li class on click

Radio Toggle Button Issue

How could I make a menu dropdown on click

What comboBox or dropDownList is this one?

Categories

Resources