how to build a toggle menu - drop-down menu with Javascript.
Script for sidebar dropdown menu with css


THe first part is the css styling for the off-canvas menu. the javascript for the cssmenu is in orange

and the html is in brown, css styles in green. Additional css styles are added for the product layout. All links and ids have been set to #

 

<style>
/*css for off-canvas sidebar menu and the cssmenu ul and li link items*/
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
height: 100%;
}
.list-group {
/*give same margin as thumbnail-list class*/
padding-top: 25px;
}
.img-rounded {
border-radius:10px;
}
/*
* Off Canvas
* --------------------------------------------------
* Greater thav 768px shows the menu by default and also flips the semantics
* The issue is to show menu for large screens and to hide for small
* Also need to do something clever to turn off the tabs for when the navigation is hidden
* Otherwise keyboard users cannot find the focus point
* (For now I will ignore that for mobile users and also not worry about
* screen re-sizing popping the menu out.)
*/
@media screen and (min-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.hideToggle {
visibility: hidden;
}
.row-offcanvas-right {
right: 25%;
}
.row-offcanvas-left {
left: 25%;
}
.row-offcanvas-right .sidebar-offcanvas {
right: -25%; /* 3 columns */
background-color: rgb(255, 255, 255);
}
.row-offcanvas-left .sidebar-offcanvas {
left: -25%; /* 3 columns */
background-color: rgb(255, 255, 255);
}
.row-offcanvas-right.active {
right: 0; /* 3 columns */
}
.row-offcanvas-left.active {
left: 0; /* 3 columns */
}
.row-offcanvas-right.active .sidebar-offcanvas {
background-color: rgb(254, 254, 254);
}

.row-offcanvas-left.active .sidebar-offcanvas {
background-color: rgb(254, 254, 254);
}

.row-offcanvas .content {
width: 75%; /* 9 columns */
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}

.row-offcanvas.active .content {
width: 100%; /* 12 columns */
}

.sidebar-offcanvas {
position: absolute;
top: 0;
width: 25%; /* 3 columns */
}
}

@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}


.row-offcanvas-right {
right: 0;
}

.row-offcanvas-left {
left: 0;
}

.row-offcanvas-right .sidebar-offcanvas {
right: -50%; /* 6 columns */
}

.row-offcanvas-left .sidebar-offcanvas {
left: -50%; /* 6 columns */
}

.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}

.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}

.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%; /* 6 columns */
}
}


/*For listNav */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'ciclesemi';
position: relative;
border-radius:10px;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: inherit;
}
#cssmenu > ul > li > a {
padding-right: 38px;/*changes the darker grey on end of list item*/
font-weight: bold;
display: block;
background: #efefef;/* color of the actual list item*/
color: #000000;
/*border-bottom: 1px solid #fff;*/
text-transform: uppercase;
position: relative;
border-radius:10px;/*adds border-radius around the right end of list item*/
}
#cssmenu > ul > li > a > span {
background: #d9d7d8; /*inner item*/
display: block;
font-weight:300;
border-bottom-left-radius:10px;border-top-left-radius:10px;/*adds radius to the inner item of the list item---the one in light grey*/
font-family: 'ciclesemi';

color: #383939;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#ffffff 50%,
#d6d6d6);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
color-stop(0.50, #ffffff),
to(#d6d6d6));
background-image: -ms-linear-gradient(top, hsl(0, 100%, 100%), #d6d6d6);
/*background: -ms-linear-gradient(top, #ffffff, #d6d6d6);*/
/*-moz-border-radius: 10px;
-webkit-border-radius: 10px;*/
/*border: 1px solid #ffffff;*/
-moz-box-shadow:
0px 1px 3px rgba(255,255,255,0.5),
inset 0px 0px 3px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(255,255,255,0.5),
inset 0px 0px 3px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(255,255,255,0.5),
inset 0px 0px 3px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.1),
0px 1px 0px rgba(255,255,255,1);

}
@media screen and (max-width: 1199px) {
#cssmenu > ul > li > a > span {
font-size: 10px;
}
}
@media screen and (min-width: 1200px) {
#cssmenu > ul > li > a > span {
font-size: 14px;
}
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: white;
}
#cssmenu span.cnt {
position: absolute;
top: 8px;
right: 15px;
padding: 10px;
margin: 0;
background: none;
border-top-right-radius:10px;
}
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
/*border: 1px solid #e0e0e0;*/
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
padding-left:50px;
display: block;
color: #282727;/*color of the link text*/
font-size: 12px;
}
#cssmenu ul ul a:hover {
color: #bd0e36;
font-size:14px;
}
#cssmenu ul ul li.odd {
background: #f4f4f4;
}
#cssmenu ul ul li.even {
background: #f4f4f4;
}
</style>

/* Javascript for the sidebar and css menu dropdown*/
<script>
$(document).ready(function () {
//for off-canvas toggle nav
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active')
});
//Inside our .each() function we first will create a variable that holds
//the number of sub menu items. Below this is the count variable. The .
//length function will return the number of items in the sub menu. The
//second variable we setup is the content variable which simply wraps
//our count variable with a HTML span element. Recognize the .cnt
//class from our CSS code earlier? Finally we find the parent LI element of
//our sub menu and append our newly created numbering element
$('#cssmenu > ul > li ul').each(function (index, element) {
var count = $(element).find('li').length;
var content = '<span class="cnt">' + count + '</span>';
$(element).closest('li').children('a').append(content);
});
//The next little bit of code will apply .even and .odd classes
//to the sub menu LI elements so that we can get the zebra stripe
//effects with our sub menus.
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
//Finally, we need to create the functionality that lets our menu
//know what to do when an item is clicked. The bulk of our code is
//wrapped in the .click() function. code inside this .click() function
//will run each time a link from the first level of our menu is clicked.
$('#cssmenu > ul > li > a').click(function () {

var checkElement = $(this).next();

$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');

if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}

if ($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
</script>
<div class="container-fluid soldier-boy-main-with-list">
<div class="col-sm-12 col-md-12 col-lg-12">
<!--try crumbs-->
<div id="breadcrumb" class="row">
<ul class="crumbs">
<li class='first'><a href='#' style='z-index:9;'>Item</a></li>
<li><a href='#' style='z-index:8;'>Item</a></li>
<li><a href='#' style='z-index:7;'>Item</a></li>
</ul>
</div>
<!--end try crumbs-->
<div class="row row-offcanvas row-offcanvas-left" style="min-height: 800px;">
<div id="" class="col-xs-6 col-sm-3 sidebar-offcanvas" role="navigation">
<div class="list-group">
<!--build dynamic menus-->
<div id='cssmenu'>
<ul>
<li id=""><a href='#'><span>View By Item</span></a>
<ul><!--can be dynamic-->
<li><a href='#'>Item</a></li>
</ul>
</li>
<li id=""><a href='#'><span>Item Color</span></a>
<ul>
<li><a href='#'>White</a></li>
<li><a href='#'>Silver</a></li>
<li><a href='#'>Ruby</a></li>
</ul>
</li>
<li id=""><a href='#'><span>Photo Gallery</span></a>
</ul>
</div>
</div>
</div>
<!--/span-->
<div class="col-xs-12 col-sm-9 content">
<p class="pull-left" style="position: absolute;">
<button type="button" class="btn btn-primary btn-xs hideToggle" data-toggle="offcanvas">Menu</button>
</p>
<!--start product listing-->
<div id="">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" style="z-index: -1;">
<img class="img img-responsive" src='' id="ItemPicture" style="text-align: center; display: block; width: 90%; margin-left: 5%; margin-right: 5%;">
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" style="z-index: 1; margin-top: -25px;">
<hr />
<span id="" class="productDetailLabel">Features</span><br />
<span id="" class="productDetailOutput">dfgdafg</span>
<span id="" class="productDetailLabel">Item Number:</span>
</div>
</div>
<div class="row" style="">
<div class="col-xs-12-sm-12 col-md-12 col-lg-12">
<div id="" style="clear: both; text-align: center;">
<div id="" class="itemAddInfoTitleSmall">
Available Colors
</div>
<div style="width: 22%; float: left;">
<a href='#'>
<img src='#' alt="Image" style="max-width: 80px;" /></a>
<br />
<span id="">Green</span>
</div>
<div style="width: 22%; float: left;">
<a href='#'>
<img src='#' alt="Image" style="max-width: 80px;" /></a>
<br />
<span id="">White</span>
</div>
</div>
<div id="" style="clear: both; text-align: center;">
<div id="" class="itemAddInfoTitleSmall">
Related Items
</div>
<div style="width: 24%; float: left;">
<a href='#'>
<img src='#' alt="Image" style="max-width: 80px;" />
</a>
<br />
<span id="">Item</span>
</div>
<div style="width: 24%; float: left;">
<a href='#'>
<img src='#' alt="Image" style="max-width: 80px;" />
</a>
<br />
<span id="">Item 2</span>
</div>
</div>
</div>
</div>
</div>
<!--end product listing-->
</div>
<!--/span-->
</div>
<!--/row off-canvas-->
</div>
<hr>
</div>
<!--/.container-->


<!--soldier-boy css and thumbnails-->
<style>
#breadcrumb {
margin:15px;
}
.crumbs { display: block; }
.crumbs li { display: inline; }
.crumbs li.first { padding-left: 8px; }
.crumbs li a,
.crumbs li a:link,
.crumbs li a:visited {
color: #666;
display: block;
float: left;
font-size: 12px;
margin-left: -13px;
padding: 7px 17px 11px 25px;
position: relative;
text-decoration: none;
}
.crumbs li a {
background-image: url('../images/css/bg-crumbs.png');
background-repeat: no-repeat;
background-position: 100% 0;
position: relative;
}
.crumbs li a:hover {
color: #333;
background-position: 100% -48px;
cursor: pointer;
}
.crumbs li a:active {
color: #333;
background-position: 100% -96px;
}
/*form site.master*/
.soldier-boy-main {
/* remove default list styles */
display:block;
padding-right:100px;
padding-left:100px;
width:100%;
}
.soldier-boy-main-with-list {
/* remove default list styles */
display:block;
padding-left:35px;
width:100%;
}
@media (min-width: 768px) and (max-width: 1199px) {
.soldier-boy-main {
padding-right:50px;
padding-left:50px;
}
}
@media (min-width: 350px) and (max-width: 767px) {
.soldier-boy-main {
padding-right:25px;
padding-left:25px;
}
.soldier-boy-main-with-list {
padding-right:0px;
padding-left:0px;
}
}
@media (max-width: 349px) {
.soldier-boy-main {
padding-right:10px;
padding-left:10px;
}
.soldier-boy-main-with-list {
padding-right:0px;
padding-left:0px;
}
}
.thumbnail-list {
/* remove default list styles */
list-style: none;
margin: 0;
margin-top:25px;
padding: 0;
/* remove spaces between li tags*/
font-size: 0;
/*text-align:center;*/
}

.thumbnail-list li {
display: inline-block;
vertical-align: top;
width: 24%;
padding: 1%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 12px;

}

.thumbnail-list img {
display: block;
width: 100%;

}

Last update:
2014-08-15 18:34
Author:
Mark
Revision:
1.1
Average rating:0 (0 Votes)

You can comment this FAQ

Chuck Norris has counted to infinity. Twice.