Develop Reference

Drop down menu won't work

I'm creating a menu that has two items "what's new" and "categories" when a user clicks categories there are supposed to be a ton of sub categories that drop down. However I can't figure out how to get them to drop down. Does anyone have any solutions? Here is the fiddle - https://jsfiddle.net/v3ftk7t0/
<div class='shop-sidebar'>
<ul class='shop-nav'>
<li class="active">What's New</li>
<li class='w-sub' data-id='shop-categories'>
<svg class='s_arrow_down'><use xlink:href="#s_arrow_down"></use></svg>
Categories
<ul>
<li>
All
</li>
<li>
Category 1
<ul>
<li>
All
</li>
<li>
Sub Category 1
</li>
<li>
Sub Category 2
</li>
<li>
Sub Category 3
</li>
<li>
Sub Category 4
</li>
<li>
Sub Category 5
</li>
<li>
Sub Category 6
</li>
<li>
Sub Category 7
</li>
<li>
Sub Category 8
</li>
<li>
Sub Category 9
</li>
</ul>
</li>
<li>
Category 2
<ul>
<li>
All
</li>
<li>
Sub Category 1
</li>
<li>
Sub Category 2
</li>
</ul>
</li>
<li>
Category 3
<ul>
<li>
All
</li>
<li>
Sub Category 1
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
css
.shop-sidebar {
width: 30%;
width: calc(295px);
display: inline-block;
padding-right: 65px;
vertical-align: top;
font-family: 'maison',sans-serif;
font-weight: 600;
font-size: 11px;
color: #000;
letter-spacing: 1.5px;
line-height: 18px;
text-transform: uppercase;
}
ul.shop-nav {
list-style: none;
padding: 0;
margin: 0;
}
ul.shop-nav li.active, ul.shop-nav li:hover {
color: #000;
opacity: 1;
font-weight: bold;
}
ul.shop-nav li {
transition: all 0.3s;
cursor: pointer;
padding: 18px 20px;
background-color: #f8f8f8;
margin-bottom: 2px;
}
ul.shop-nav li.active a {
color: #000;
}
ul.shop-nav a {
color: #000;
}
ul.shop-nav li.active, ul.shop-nav li:hover {
color: #000;
opacity: 1;
font-weight: bold;
}
ul.shop-nav li svg {
width: 10px;
height: 10px;
vertical-align: text-bottom;
fill: #000;
transition: all 0.3s;
float: right;
}
ul.shop-nav li ul {
display: none;
list-style: none;
padding-left: 0;
margin: 12px 0 0;
}
ul.shop-nav li ul li {
color: #000;
border: 0 !important;
font-family: 'maison',sans-serif;
font-size: 12px;
letter-spacing: 0;
padding: 0;
font-weight: normal;
text-transform: none;
margin-bottom: 12px;
}
ul.shop-nav li ul ul {
margin-left: 16px;
}

Here you have the way, I've removed all what i didnt need, you will be able to add it again. Just click on Categories and enjoy!!!
.shop-sidebar {
width: 30%;
width: calc(295px);
display: inline-block;
padding-right: 65px;
vertical-align: top;
font-family: 'maison',sans-serif;
font-weight: 600;
font-size: 11px;
color: #000;
letter-spacing: 1.5px;
line-height: 18px;
text-transform: uppercase;
}
ul.shop-nav {
list-style: none;
padding: 0;
margin: 0;
}
ul.shop-nav li.active, ul.shop-nav li:hover {
color: #000;
opacity: 1;
font-weight: bold;
}
ul.shop-nav li {
transition: all 0.3s;
cursor: pointer;
padding: 18px 20px;
background-color: #f8f8f8;
margin-bottom: 2px;
}
ul.shop-nav li.active a {
color: #000;
}
ul.shop-nav a {
color: #000;
}
ul.shop-nav li.active, ul.shop-nav li:hover {
color: #000;
opacity: 1;
font-weight: bold;
}
ul.shop-nav li svg {
width: 10px;
height: 10px;
vertical-align: text-bottom;
fill: #000;
transition: all 0.3s;
float: right;
}
ul.shop-nav li ul {
display: none;
list-style: none;
padding-left: 0;
margin: 12px 0 0;
}
ul.shop-nav li ul li {
color: #000;
border: 0 !important;
font-family: 'maison',sans-serif;
font-size: 12px;
letter-spacing: 0;
padding: 0;
font-weight: normal;
text-transform: none;
margin-bottom: 12px;
}
ul.shop-nav li ul ul {
margin-left: 16px;
}
input[type='checkbox'] {
display: none;
}
#subList, #subListCategory1 {
display: none;
}
#categories:checked ~ #subList {
display: block;
}
#category1:checked ~ #subListCategory1 {
display: block;
}
<div class='shop-sidebar'>
<ul class='shop-nav'>
<li class="active">What's New</li>
<li class='w-sub' data-id='shop-categories'>
<svg class='s_arrow_down'><use xlink:href="#s_arrow_down"></use></svg>
<input type="checkbox" id="categories" />
<label id="label" for="categories">Categories</label>
<ul id="subList">
<li>
<input type="checkbox" id="all" />
<label id="allLabel" for="all">All</label>
</li>
<input type="checkbox" id="category1" />
<label id="category1Label" for="category1">Category 1</label>
<ul id="subListCategory1">
<li>
All
</li>
<li>
Sub Category 1
</li>
<li>
Sub Category 2
</li>
<li>
Sub Category 3
</li>
<li>
Sub Category 4
</li>
<li>
Sub Category 5
</li>
<li>
Sub Category 6
</li>
<li>
Sub Category 7
</li>
<li>
Sub Category 8
</li>
<li>
Sub Category 9
</li>
</ul>
<li>
<a href="#" class="active">
Category 1 </a>
</li>
<li>
<a href="#" class="active">
Category 2 </a>
<ul>
<li>
<a href="#">
All
</a>
</li>
<li>
Sub Category 1
</li>
<li>
Sub Category 2
</li>
</ul>
</li>
<li>
<a href="#" class="active">
Category 3 </a>
<ul>
<li>
<a href="#">
All
</a>
</li>
<li>
Sub Category 1
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Edit: css classes added again.
Here the complete fiddle.

Add this css:
ul.shop-nav li:hover ul {
display: block;
}
This will do the following:
When you hover over the ul.shop-nav li element you set the ul nested inside to display.

css + html menu hitbox

I wrote some code using different internet sources. I ran into a problem -
every object that's in the bottom part of the menu cannot be interacted with.
The menu interferes with everything below where the dropdown falls.
<style>
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
</style>
<html lang="he">
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

#nav_wrapper ul ul li{ text-align:left;}
you need to add this only: demo

You might be able to use vertical-align for the list elements & text-align for the links.

Just add a class to the <ul> tag of each dropdown and add text-align: left to it.
FIDDLE Here

How hide/visible element in accordion

i want to when accordion element is visible span and img element display and when it invisible their not displayed. in fact user click on one of element to display it img and span add it and when user slide toggle span and img hide.
$("#accordion > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
$('#accordion ul:eq(0)').show();
#accordion {
list-style: none;
padding: 0 0 0 0;
width: 170px;
}
#accordion div {
display: block;
background-color: #FF9927;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
}
#accordion ul{
display: none;
}
#accordion ul li {
font-weight: normal;
cursor: auto;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion">
<li>
<div>Sports <img src='' width='25' height='25'> <br><span>#20</span></div>
<ul>
<li>Golf</li>
</ul>
</li>
<li><div>Technology<img src='' width='25' height='25'> <br><span>#20</span></div>
<ul>
<li>iPhone</li>
</ul>
</li>
</ul>

What i could interpret was you are looking for something like this
http://jsfiddle.net/L034j1gh/
#accordion {
list-style: none;
padding: 0 0 0 0;
width: 170px;
}
#accordion div {
display: block;
background-color: #FF9927;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
}
#accordion ul{
display: none;
}
#accordion ul li {
font-weight: normal;
cursor: auto;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion > li > div>img{
display:none;
}
$("#accordion > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$(this).children('img').show();
$('#accordion ul').slideUp(300);
}
else
{
$(this).children('img').hide();
}
$(this).next().slideToggle(300);
});
$('#accordion ul:eq(0)').show();
$('#accordion > li:first-child > div>img').show();
<ul id="accordion">
<li>
<div>Sports <img src='' width='25' height='25'> <br><span>#20</span></div>
<ul>
<li>Golf</li>
</ul>
</li>
<li><div>Technology<img src='' width='25' height='25'> <br><span>#20</span></div>
<ul>
<li>iPhone</li>
</ul>
</li>
</ul>

JSFiddle
If I got it right, this is what you need(click on link to toggle visibility on image and span)
The code of the fiddle is:
<ul id="accordion">
<li>
<div id="firstdiv">Sports
<img alt="b" src='' width='25' height='25' />
<br/><span>#20</span>
</div>
<ul id="firstul">
<li>Golf
</li>
</ul>
</li>
<li>
<div id="seconddiv">Technology
<img alt="a" src='' width='25' height='25'>
<br/><span>#20</span>
</div>
<ul id="secondul">
<li>iPhone
</li>
</ul>
</li>
$("#accordion > li > div").hide();
$("#accordion > li > #firstul").click(function () {
$("#accordion > li > #firstdiv").slideToggle(300);
});
$("#accordion > li > #secondul").click(function () {
$("#accordion > li > #seconddiv").slideToggle(300);
});
Hope it helps you.

on load first division should be open

i want when the page loads the first division should be opened by default.also user preference will be taken if user wants to open the first accordion division then on load of a page the first div will be opened,if the users wants to change the preference to second division then second division will open
<div class="wrap">
<ul class="accordion1">
<li>
<h2 id="first">CMT</h2>
<div class="content">
<ul class="accord">
<li> main link1
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>Link Five
</li>
</ul>
</li>
<li> main link2
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>Link Five
</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<h2>FOIS</h2>
<div class="content">content fois</div>
</li>
<li>
<h2>ASP</h2>
<div class="content">content ASP</div>
</li>
<li>
<h2>PTT</h2>
<div class="content">content PTT</div>
</li>
</ul>
</div>
CSS
.wrap {
margin-left: 0px;
margin-top: 0px;
width: 100px;
}
.accordion1 {
width: 178px;
margin: 0px;
padding: 0px;
list-style: none;
border: 1px solid #ddd;
}
.accordion1 h2 {
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
text-decoration: none;
padding: .25em .25em .25em 2em;
color: #333;
background: url('compo_images/gradient_v_gray.gif') repeat-x;
background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.accordion1 h2:hover {
background: url('compo_images/gradient_v_orange.gif') repeat-x;
color: white;
}
.accordion1 li div.content {
padding: 3px;
background: #fcfbfb;
border-bottom: 1px solid #ddd;
/*border: 1px solid #ddd;*/
}
.accordion1 li:hover h2 {
color: white;
background-image: url("./compo_images/arrow_exp_n.gif");
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
.accord > li {
padding: 0;
list-style-type: none;
}
.accord > li > a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 12px;
color: #5f5c5c;
background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat;
}
.accord > li > ul > li > a {
text-decoration: none;
color: #5f5c5c;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat;
padding-left: 17px;
}
.accord > li > ul {
list-style-type: none;
text-align: left;
margin: 0;
padding: 1px;
}
.accord {
text-decoration: none;
padding-left: 5px;
}
.accord > li > a:hover {
color: #f8b106;
}
.accord > li > ul > li > a:hover {
color: #f8b106;
}
.accordion1 > li > h2.active{
background-color: red;
}
jquery
jQuery(function ($) {
var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
var $h2s = $lis.children('h2').click(function(){
var $this = $(this), $t = $this.next();
$contents.not($t).stop(true, true).slideUp();
$this.toggleClass('active', !$t.is(':visible'));
$t.slideToggle();
$h2s.not(this).removeClass('active');
})
})
js fiddle
http://jsfiddle.net/dh7Cc/2/

Try to trigger a click event on the first h2 element
jQuery(function ($) {
var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
var $h2s = $lis.children('h2').click(function(){
var $this = $(this), $t = $this.next();
$contents.not($t).stop(true, true).slideUp();
$this.toggleClass('active', !$t.is(':visible'));
$t.slideToggle();
$h2s.not(this).removeClass('active');
});
$h2s.first().click()
})

toggle images for expand all and collapse all

I am trying to swap images of collapse all and expand all on click but i am reallly not getting it please can any one help me ... thanks in advance
here is the the link for the sample
http://www.ornusweb.com/showcase/checking/collapsible-menu.html
everything is working fine except the expan all collapse all buttons wen we click on it.
it should swap images
please help me !!!
Here is the css
body {
font: 10pt Arial, Helvetica, Sans-serif;
}
a {
text-decoration: none;
}
#example1,
#example2,
#example3,
#example4,
#example5 {
float: left;
}
.expand_all{
cursor: pointer;
}
.collapse_all {
cursor: pointer;
}
.example_menu {
font-size: 90%;
list-style: none;
margin: 0;
padding: 0;
vertical-align: top;
width: 624px;
}
.example_menu ul {
display: none;
list-style: none;
padding: 0;
}
#menu1,
#menu2,
#menu3,
#menu4,
#menu5 {
margin: 0;
}
#menu1 li,
#menu2 li,
#menu3 li,
#menu4 li,
#menu5 li,
.example_menu li {
background-image: none;
margin: 0;
padding-bottom: 1px;
}
.example_menu ul ul {
display: block;
}
.example_menu ul ul li a {
padding-left: 20px;
width: 109px;
}
.example_menu a {
color: #000;
cursor: pointer;
display: block;
font-weight: bold;
margin-left: 0;
padding: 10px 2px 2px 17px;
width: 605px;
height: 24px;
}
.example_menu a.expanded {
background: #E8E8E8 url('images/minusimg1.png') no-repeat 592px 50%;
}
.example_menu a.collapsed {
background: #E8E8E8 url('images/plusimg1.png') no-repeat 592px 50%;
}
.example_menu a:hover {
text-decoration: none;
}
.example_menu ul a {
background: #e8e8e8;
border-top: 2px solid #fff;
color: #000;
display: block;
font-weight: normal;
padding: 2px 2px 2px 10px;
width: 119px;
}
.example_menu ul a:link {
font-weight: normal;
}
.example_menu ul a:hover {
background : #f5f5f5;
text-decoration: underline;
}
.example_menu li.active a {
background: #fff;
}
.example_menu li.active li a {
background: #e8e8e8;
}
#menu1 li.footer,
#menu2 li.footer,
#menu3 li.footer,
#menu4 li.footer,
#menu5 li.footer,
.example_menu .footer {
background: transparent url('images/footer.jpg') no-repeat 0 0;
border-top: 2px solid #fff;
height: 9px;
line-height: 15px;
margin: 0 0 10px 0;
width: 131px;
}
.example_menu .footer span {
display: none;
}
/* nadeem css */
.newstyles{ font: 20px/18px arial;color: #0B0B0C;margin: 5px 0px 20px 5px;}
.newstyles li{ height: 32px;font: bold 12px/32px arial;color: #0B0B0C;}
.newstyline{clear: both;height: 1px;background-color: #E6E6E6;width: 100%;margin: 1px 0px 3px 0px;}
}
here is the js
$(document).ready(function() {
setTimeout(function() {
// Slide
$('#menu1 > li > a.expanded + ul').slideToggle('medium');
$('#menu1 > li > a').click(function() {
$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
});
$('#example1 .expand_all').click(function() {
$('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium');
});
$('#example1 .collapse_all').click(function() {
$('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium');
});
}, 250);
});
and here is the html
<div id="example1">
<div><a class="expand_all"><img src="images/close.jpg" class="img-swap" /></a><a class="collapse_all"><img src="images/open.jpg" alt="" /></a></div>
<ul id="menu1" class="example_menu">
<li><a class="expanded">Section A</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
<li><a class="expanded">Section B</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
<li><a class="expanded">Section C</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
</ul>
</div>

Guessing it is the two images in the top, you could do this:
<div>
<a class="expand_all" style="display: none;" onclick="$('.expand_all').hide();$('.collapse_all').show()">
<img class="img-swap" src="images/toggle-buttons_01.png">
</a>
<a class="collapse_all" onclick="$('.expand_all').show();$('.collapse_all').hide()" style="display: inline;">
<img alt="" src="images/toggle-buttons_02.png">
</a>
</div>
Simply hiding the irrelevant one....not really swapping images though.