side menu with submenu - javascript

i want the menu to have the same effect as this menu from this page http://store.anumberofnames.org/ when someone clicks on the shop link the submenu to drop down and when they click on information the shop link to close and the information submenu to dropdown and also when they click on a category on the sebmenus i want the link that they selected to be highlighted, below is the html and css code i have
html
<div id="menu">
<nav>
<ul>
<li>
SHOP
<ul>
<li>T-SHIRT</li>
<li>KNIT</li>
<li>SHIRT</li>
<li>PANTS</li>
<li>ACCESSORY</li>
</ul>
<li>INFORMATION
<ul>
<li>ABOUT</li>
<li>CONTACT</li>
<li>NEWSLETTER</li>
<li>LEGAL</li>
</ul>
</LI>
</ul>
</nav>
</div>
</div>
css
#menu nav > ul > li > ul {
display: none;
text-align: right;
}
#menu nav a {
display: block;
}
#menu nav > ul > li > a {
display: block;
border-bottom: 3px solid transparent;
}
#menu nav > ul > li:hover > a {
border-bottom: 3px solid white;
}
#menu nav ul li {
font-size: 11px;
top:106px;
list-style-type: none;
text-decoration: none;
color:#ffffff;
line-height: 19px;
}
nav a {
color:rgb(153, 153, 153);
text-decoration: none;
}
#mainSidebar {
display: block;
font-family:arial;
font-size: 11px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 450px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 750px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: fixed;
text-transform: uppercase;
vertical-align: baseline;
}
#menu nav ul {
padding: 0px;
line-height: 11.5px;
margin-top: 0px;
padding-bottom: 5px;
width: 143px;
padding-top: 5px;
}
#menu nav ul li a:hover{
color: #000;
}

That uses jQuery. You can do it using the two functions: slideDown() and slideUp(), or using a single function: slideToggle():
$(function() {
$("#menu nav > ul > li > ul").hide();
$("#menu nav > ul > li > a").click(function() {
if (!$(this).next("ul").is(":visible")) {
$("#menu nav > ul > li > ul").slideUp();
$(this).next("ul").slideDown();
}
return false;
});
});
#menu nav > ul > li > ul {
margin: 0;
margin-left: 25px;
}
#menu nav a {
display: block;
}
#menu nav > ul > li > a {
display: block;
border-bottom: 3px solid transparent;
}
#menu nav > ul > li:hover > a {
border-bottom: 3px solid white;
}
#menu nav ul li {
font-size: 11px;
list-style-type: none;
text-decoration: none;
color: #ffffff;
line-height: 19px;
}
nav a {
color: rgb(153, 153, 153);
text-decoration: none;
}
#mainSidebar {
display: block;
font-family: arial;
font-size: 11px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 450px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 750px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: fixed;
text-transform: uppercase;
vertical-align: baseline;
}
#menu nav ul {
padding: 0px;
line-height: 11.5px;
margin-top: 0px;
padding-bottom: 5px;
width: 143px;
padding-top: 5px;
}
#menu nav ul li a:hover {
color: #000;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div id="menu">
<nav>
<ul>
<li>
SHOP
<ul>
<li>T-SHIRT</li>
<li>KNIT</li>
<li>SHIRT</li>
<li>PANTS</li>
<li>ACCESSORY</li>
</ul>
<li>INFORMATION
<ul>
<li>ABOUT</li>
<li>CONTACT</li>
<li>NEWSLETTER</li>
<li>LEGAL</li>
</ul>
</LI>
</ul>
</nav>
</div>

Related

close sub-menu dropdown on click anywhere in the page

I have a menubar on top of my page which show sub-menus when clicked and I want to make disappear the sub-menu on click of anywhere in the page. So far i did code to display sub-menu on click of my menu. Below is the code for the same!
Can somebody help me with the existing code to close sub-menu part on click of anywhere in the page?
Many thanks in advance!
var ddmenuitem = 0;
function jsddm_open() {
jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
$(this).find('ul.submenu').css('transition', '1s');
//$(this).find('div.divsubsubmenu').css('display','none');
}
function jsddm_close() {
if (ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function() {
$('#topnav > ul > li').bind('click', jsddm_open);
$('#topnav > ul > li > a').click(function(ev) {
if ($(this).hasClass('current')) {
ev.preventDefault();
}
if ($(this).attr('class') != 'active') {
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
});
#topnav {
width: 800px;
height: 30px;
background-color: #191919;
margin-top: 10px;
position: relative;
font-size: 12px;
font-family: Verdana;
margin: auto;
text-align: center;
}
#topnav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#topnav ul li {
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a.MenuLink {
padding: 5px 15px;
color: red;
text-decoration: none;
display: block;
font-weight: bold;
border: double #161718;
border-width: 1.3px;
border-top: none;
border-bottom: none;
}
#topnav ul li a:link {
color: red;
text-decoration: none;
}
#topnav ul li a:visited {
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover {
background-color: black;
text-decoration: none;
transition: 0.3s;
}
#topnav ul li a.active {
text-decoration: none;
color: black;
background: #e0e0e0;
font-size: 15px;
font-weight: bold;
}
#topnav ul li ul.submenu {
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 30px;
display: none;
background: #e0e0e0;
width: 800px;
height: 30px;
}
#topnav ul li ul.submenu a {
display: block;
color: #00537F;
font-weight: bold;
padding: 4px 8px;
}
#topnav ul.submenu>li:hover>a {
background-color: black;
color: white;
}
#topnav ul div {
visibility: hidden;
}
#topnav li:hover ul div.divsubsubmenu {
visibility: hidden;
}
#topnav li li:hover div.divsubsubmenu {
visibility: visible;
opacity: 1;
z-index: 1;
}
#topnav div.divsubsubmenu {
height: 50px;
background: black;
color: white;
float: left;
left: 0;
width: 800px;
position: absolute;
}
#topnav div.divsubsubmenu>ul>li:hover>a {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="topnav">
<ul>
<li>
<a class="MenuLink" href="#">Admin</a>
</li>
<li>
<a class="MenuLink" href="#"> MAC </a>
<ul class="submenu">
<li>Master Data</li>
<li>
Transaction Data
<div class="divsubsubmenu">
<ul>
<li>Company Master</li>
<li>Location Master</li>
<li>Size Master</li>
</ul>
</div>
</li>
<li>
Admin Data
</li>
</ul>
</li>
<li>
<a class="MenuLink" href="#">TPC </a>
<ul class="submenu">
<li>TPC1</li>
<li>TPC2</li>
</li>
</ul>
</div>
</body>
Just add this small code in your javascript:
$("body").on('click', function(e){
var element = e.target.tagName;
if(element !== 'A') {
$("#topnav ul li ul.submenu").css('display', 'none');
}
});
Hope this may help you.

Sub-menu hover menu issue on css

I want to make a code where I hover my mouse through the menu items, and appears a submenu with a list ...
Here's my html nav code on CSS first and then the HTML code ...:
nav {
background-color: #FFF;
width: 960px;
margin: 0 auto;
}
div.ajuste {
clear: both;
}
nav ul {
width: 95%;
margin: 5px 5px 0 5px;
padding: 10px 10px 10px 6px;
height: 40px;
line-height: 100%;
background: #FFF;
/* position:relative;
z-index:999;
overflow: hidden;*/
float:left;
list-style-type: none;
}
nav li {
margin-bottom: 10px;
padding-right: 25px;
float: left;
/*position: relative;*/
/*list-style: none;*/
}
nav a {
color: #36E;
font-weight: bold;
text-decoration: none;
/*margin-right: 6%;*/
font-family: arial, sans-serif;
font-style: normal;
font-size: 15px;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
/*margin-bottom: 10px;*/
}
nav a:hover {
color: #0505B4;
}
nav a.active {
color: #1414D3;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio</li>
<li>Biografía</li>
<li class="submenu">Discografía</li>
<ul>
<li>Innerspeaker</li>
<li>Lorenism</li>
<li>Currents</li>
</ul>
</li>
</ul>
<div class="ajuste">
<nav>
My fail occurs when I hover it ... List submenu don't appears...
What's bad on my code?
The second UL, need to be inside the LI tag.
nav {
background-color: #FFF;
width: 960px;
margin: 0 auto;
}
div.ajuste {
clear: both;
}
nav ul {
width: 95%;
margin: 5px 5px 0 5px;
padding: 10px 10px 10px 6px;
height: 40px;
line-height: 100%;
background: #FFF;
/* position:relative;
z-index:999;
overflow: hidden;*/
float:left;
list-style-type: none;
}
nav li {
margin-bottom: 10px;
padding-right: 25px;
float: left;
/*position: relative;*/
/*list-style: none;*/
}
nav a {
color: #36E;
font-weight: bold;
text-decoration: none;
/*margin-right: 6%;*/
font-family: arial, sans-serif;
font-style: normal;
font-size: 15px;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
/*margin-bottom: 10px;*/
}
nav a:hover {
color: #0505B4;
}
nav a.active {
color: #1414D3;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio</li>
<li>Biografía</li>
<li class="submenu">
Discografía
<ul>
<li>Innerspeaker</li>
<li>Lorenism</li>
<li>Currents</li>
</ul>
</li>
</ul>
<nav>
You have an extra li tag. Get rid of it, and it should work
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio
</li>
<li>Biografía
</li>
<li class="submenu">Discografía
<ul>
<li>Innerspeaker
</li>
<li>Lorenism
</li>
<li>Currents
</li>
</ul>
</li>
</ul>
<div class="ajuste">
<nav>

jQuery working in dreamweaver but not in browser

So, here's my code(not all of it, just what you need to understand):
HTML:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
jQuery(document).ready(function(){
jQuery("nav ul ul").each(function(){
var navWidth=jQuery(this).width();
var liWidth=jQuery(this).closest("li").width();
var gaps=navWidth-liWidth;
var moveLeft=-gaps/2;
jQuery(this).css({"margin-left":moveLeft});
})
})
</script>
</head>
<body>
<header>
<nav>
<ul><li>
ACASA</li><li>
CULTURA
<ul class="align1">
<li>Cultura populară</li>
<li class="border">Cultura cultă</li>
<li class="border">Cultura de masă</li>
</ul>
</li><li>
CULTURA ROMÂNIEI
<ul class="align2">
<li>Elemente dacice</li>
<li class="border">Elemente romane</li>
<li class="border">Alte influențe</li>
</ul>
</li><li>
INTERFERENȚE CULTURALE
<ul class="align3">
<li>Români și romi</li>
<li class="border">Români și maghiari</li>
<li class="border">Români și evrei</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
CSS:
nav {
text-align: center;
margin-top: 5%;
margin-bottom: 5%;
font-family: Krona One;
border-top: 1px solid #fff;
text-decoration: none;
color: #FFFFFF;
font-size: large;
}
nav ul {
list-style-type: none;
position:relative;
}
nav ul li {
display: inline-block;
padding: 25px;
}
nav ul li a {
color: #FFFFFF;
text-decoration: none;
}
nav ul li a:hover {
text-shadow: 0px 0px 20px #FFFFFF;
color: #FFFFFF;
text-decoration: none;
}
nav ul li a:hover + ul{
display: block;
visibility:visible;
}
nav ul ul::before {
background: url(images/menu_corner.gif) no-repeat 0% 0%;
width: 9px;
height: 5px;
display: block;
margin: 0 -5px 0 0;
position: absolute;
top: -5px;
right: 50%;
content: '';
}
nav ul ul {
text-align: center;
font-weight: normal;
display: none;
visibility: hidden;
position: absolute;
background-color: #2E2E2E;
font-family: 'Open Sans', sans-serif;
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
padding-left: 0px;
padding-right: 0px;
margin-top: 30px;
font-size: 16px;
}
nav ul ul li {
display: block;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.border {
border-top: 1px solid #434343;
}
nav ul ul li a:hover {
color: #767676;
text-decoration: none;
text-shadow: 0px 0px 0px;
}
body {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-style: normal;
font-weight: 400;
background-image: url(http://i.imgur.com/qjincKZ.jpg);
color: #FFFFFF;
margin: 0 0 0 0;
background-size: cover;
}
I don't know why, but the jQuery works only in dreamweaver... In order to work in dreamweaver, I have to download jQuery and add it to the contain folder, but for some pourposes, I pasted a CDN.
If I upload everything to jsfiddle and put the javascript code into the javascript box, it works, but from dreamweaver it doesn't.
Try this
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" />
<script>
jQuery(document).ready(function(){
jQuery("nav ul ul").each(function(){
var navWidth=jQuery(this).width();
var liWidth=jQuery(this).closest("li").width();
var gaps=navWidth-liWidth;
var moveLeft=-gaps/2;
jQuery(this).css({"margin-left":moveLeft});
});
});
Create a new document and paste the following inside it:
$(document).ready(function () {
$("nav ul ul").each(function () {
var navWidth = $(this).width();
var liWidth = $(this).closest("li").width();
var gaps = navWidth - liWidth;
var moveLeft = -gaps / 2;
$(this).css({
"margin-left": moveLeft
});
});
});
Next, save it as global.js inside your contain folder and then add the following to the head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="contain/global.js"></script>
This should do the trick.
Hope this helps.

Intermittent error when displaying the drop down menu

I'm having trouble when displaying a dropdown menu.
fiddler: http://jsfiddle.net/GxrSk/
The Simple HTML code:
<nav>
<ul id="top-menu">
<li class="parent">
MENU ITEM
<ul class="sub-menu">
<li>ITEM 1</li>
<li>ITEM 2</li>
</ul>
</li>
</ul>
</nav>
The CSS:
ol, ul {
list-style: none;
padding:0px;
margin:0px;
}
nav { margin-top: 28px; }
#top-menu li { position: relative; }
#top-menu > li { display: inline-block; margin-left: 40px; }
#top-menu li a { font-family: "Ubuntu Condensed", sans-serif; color: #000; font-size: 16px; text-transform: uppercase; }
ul.sub-menu { display: none; top: 26px; position: absolute; min-width: 137px; z-index: 9999; }
ul.sub-menu > li > a { text-align: center; display: block; }
#top-menu li:hover > ul.sub-menu { display: block; }
Look, the problem is that sometimes I can navigate the menu and some times when I try to enter it, the menu has hidden.
If someone can't understand, post in the comments below.
Change top to padding top.
padding-top: 20px;
try to make ul.sub-menu { top:20px; }
ol, ul {
list-style: none;
padding:0px;
margin:0px;
}
nav { margin-top: 28px; }
#top-menu li { position: relative; }
#top-menu > li { display: inline-block; margin-left: 40px; }
#top-menu li a { font-family: "Ubuntu Condensed", sans-serif; color: #000; font-size: 16px; text-transform: uppercase; }
ul.sub-menu { display: none; top: 20px; position: absolute; min-width: 137px; z-index: 9999; }
ul.sub-menu > li > a { text-align: center; display: block; }
#top-menu li:hover > ul.sub-menu { display: block; }
keep decreasing the top-value in ul.sub-menu until it works.

Combine checkbox and button in same CSS horitonzal menu

Menu items for the Zoom portions I need them to function as a button click. The Test1-4 I need to function like a checkbox. The Zoom to buttons are working correctly. The Test1-4 are not working properly
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a title='Zoom to U.S' input type='button' name='US' onclick='US();'><span>Zoom to U.S.</span></a></li>
<li><a title='Zoom to Canada' input type='button' name='Canada' onclick='Canada();'><span>Zoom to Canada</span></a></li>
<li><a title='Zoom to Mexico' input type='button' name='Mexico' onclick='Mexico();'><span>Zoom to Mexico</span></a></li>
<li><a title='Test 1 KML' input type='checkbox' id='kml-Test1-check' name='kml-Test1-check' onclick="toggleKml('Test1');"><span>Test 1 KML</span></a></li>
<li><a title='Test 2 KML' input type='checkbox' id='kml-Test2-check' name='kml-Test2-check' onclick="toggleKml('Test2');"><span>Test 2 KML</span></a></li>
<li><a title='Test 3 KML' input type='checkbox' id='kml-Test3-check' name='kml-Test3-check' onclick="toggleKml('Test3');"><span>Test 3 KML</span></a></li>
<li><a title='Test 4 KML' input type='checkbox' id='kml-Test4-check' name='kml-Test4-check' onclick="toggleKml('Test4');"><span>Test 4 KML</span></a></li>
<li><a title='Additional KMLs'input type='button' name='AKML' onclick='open_win();'><span>Additional KMLs</span></a></li>
<li><a title='Remove all KMLs on the screen'input type='button' name='RKML' onclick='killKML();'><span>Remove All KMLs</span></a></li>
<li class='last'><a title="Contact"><span>Contact</span></a></li>
</ul>
</div>
</body>
#cssmenu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width: auto;
}
#cssmenu ul {
background: #333333;
height: 35px;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu li {
float: left;
padding: 0px;
}
#cssmenu li a {
background: #333333 url('images/seperator.png') bottom right no-repeat;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
#cssmenu > ul > li > a {
color: #cccccc;
}
#cssmenu ul ul a {
color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
background: #2580a2 url('images/hover.png') bottom center no-repeat;
color: #FFFFFF;
text-decoration: none;
}
#cssmenu li ul {
background: #333333;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 225px;
z-index: 200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {
background: url('images/sub_sep.png') bottom left no-repeat;
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 225px;
}
#cssmenu li:hover li a {
background: none;
}
#cssmenu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
background: #2580a2 url('images/hover_sub.png') center left no-repeat;
border: 0px;
color: #ffffff;
text-decoration: none;
}
#cssmenu p {
clear: left;
}
Your HTML is in correct, instead of
<li><a title='Zoom to U.S' input type='button' name='US' onclick='US();'><span>Zoom to U.S.</span></a></li>
Use
<li><a title='Zoom to U.S'><input type='button' name='US' onclick='US();'/><span>Zoom to U.S.</span></a></li>
DEMO

Categories