I got this code from JavaScript Kit and it's not working properly... Their site isn't very active so I posted here instead. The list is displaying correctly, however, if I hover over the menu(main menu, submenus, etc) and then hover out, the entire menu disappears. When you hover back over the main menu, it reappears. The rest of the submenus appear correctly. Any ideas?
JS:
var cssmenuids=["navigation"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.
function createcssmenu2(){
for (var i=0; i<cssmenuids.length; i++){
var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML=" "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.style.zIndex=100
this.getElementsByTagName("ul")[0].style.visibility="visible"
this.getElementsByTagName("ul")[0].style.zIndex=0
}
ultags[t].parentNode.onmouseout=function(){
this.style.zIndex=0
this.getElementsByTagName("ul")[0].style.visibility="hidden"
this.getElementsByTagName("ul")[0].style.zIndex=100
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu2, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu2)
HTML:
<div id="navigation">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Rosters
<ul>
<li>Counter-Strike: Source</li>
<li>Team Fortress 2</li>
<li>Black Ops 2</li>
<li>Complete Roster</li>
</ul></li>
<li>Matches
<ul>
<li>Schedule</li>
<li>Results</li>
</ul></li>
<li>Servers</li>
<li>Recruiting</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS:
#navigation {
background: url(images/navigation_bg.gif) repeat-x;
border-top: #666666;
border-bottom: #333333;
height: 59px;
margin: 0px;
padding: 0px;
text-align: center;
line-height: 59px;
}
#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
z-index: 100;
}
#navigation ul li {
position: relative;
display: inline-block;
float: left;
}
#navigation ul li a {
display: bock;
width: 160px;
padding: 2px 8px;
border: 0px;
text-decoration: none;
background: url(images/navigation_item_bg.gif) repeat-y left;
color: #737373;
font-size: 14px;
font-weight: bold;
}
#navigation ul li.last a {
display: bock;
width: 160px;
padding: 2px 8px;
border: 0px;
text-decoration: none;
background: url(images/navigation_item_bg.gif) repeat-y left, url(images/navigation_item_bg.gif) repeat-y right;
color: #737373;
font-size: 14px;
font-weight: bold;
}
#navigation ul li ul {
top: 0;
left: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
zIndex: 100;
}
#navigation ul li ul li {
display: inline;
float: none;
margin: 0px;
padding: 0px;
}
#navigation ul li ul li a {
width: 175px;
font-weight: bold;
text-decoration: none;
background: #000;
border-width: 0px 1px;
padding: 0px 5px;
display: block;
}
#navigation ul li ul li a:hover {
background: #333333;
}
That script needs to exclude the topmost div and ul of the menu from hiding:
if (this !== ultags[0].parentNode) {
this.style.zIndex = 0;
this.getElementsByTagName("ul")[0].style.visibility = "hidden";
this.getElementsByTagName("ul")[0].style.zIndex = 100;
}
jsfiddle
Related
I wants to add one additional menu item on this menu with css before/after
I added it with css after class, but is there any way to add link with js or jquery on this newly added after menu ? I don't wants to add this Home menu with html.
ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
background: #d89b00;
margin: 10px;
padding: 0;
position:relative;
}
ul li {
display: inline-block;
margin: 0;
padding: 0;
}
ul li a {
display: block;
padding: 15px 20px;
line-height: 20px;
color: #fff;
font-family: Raleway, sans-serif;
line-height: 1;
font-size: 14px;
letter-spacing: 1px;
text-decoration: none;
}
ul li a:hover {
color: #dff2fa;
}
ul li a::after {
position: absolute;
top: 100%;
left: 0;
z-index: -1;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 16px 20px;
color: #dff2fa;
background: #19799f;
content: attr(data-title);
transition: background 0.3s;
transform: rotateX(-90deg);
transform-origin: 50% 0;
}
ul:before{
content:"Home";
right:0;
padding:10px;
color:#fff;
}
<ul id="main-menu">
<li>Info</li>
<li>About</li>
<li>Contact</li>
</ul>
You can use prepend() as below to achieve this.
$('#main-menu').prepend('<li>Home</li>');
ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
background: #d89b00;
margin: 10px;
padding: 0;
position:relative;
}
ul li {
display: inline-block;
margin: 0;
padding: 0;
}
ul li a {
display: block;
padding: 15px 20px;
line-height: 20px;
color: #fff;
font-family: Raleway, sans-serif;
line-height: 1;
font-size: 14px;
letter-spacing: 1px;
text-decoration: none;
}
ul li a:hover {
color: #dff2fa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main-menu">
<li>Info</li>
<li>About</li>
<li>Contact</li>
</ul>
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.
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>
I am following up on this question and answer:
Sub-menu expanding parent div instead of displaying on top
If there is a div below the menu in the example above, how do you keep 1) that div contents from moving around, and 2) the size of the div from moving around, yet keep it responsive?
For example I forked the js fiddle from the link above and created the div id="mytest". I'd like the menu and the "mytest" div to be completely independent when you hover over the "About Me" link. Here is my fork: http://jsfiddle.net/nXqn8/
Here is the code:
<div id="menu">
<ul>
<li><a id="" class="" href="">Home</a></li>
<li><a id="" class="" href="">About Me</a>
<ul class="sub-menu">
<li>Biography</li>
<li>Photo Galery</li>
<li>Foot Print</li>
</ul>
</li>
<li><a id="" class="" href="">Expertise</a></li>
<li><a id="" class="" href="">Projects</a>
<ul class="sub-menu">
<li>Geo 228 Portal</li>
<li>NEP Application</li>
<li>Geo Address Book</li>
<li>Assets Management</li>
</ul>
</li>
<li><a id="" class="" href="">Contact</a></li>
</ul>
</div>
<div id="mytest"> xxxxxxxxxxxxxxxxxxxxxxxxxx Please stop me from moving around!!! xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div>
css:
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #666666;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
overflow: visible;
z-index: 2;
height: 35px;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
}
#menu li {
display: block;
width: 120px;
float: left;
border-right: 1px solid #999;
z-index: 4;
}
#menu a {
color: #ffffff;
font-weight: bold;
display: block;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px 20px;
}
#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}
#menu ul.sub-menu {
display: none;
position: relative;
}
#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
}
#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}
#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
#mytest {
background-color: red;
}
Ultimately, I have after something like the main menus you see at the top of accenture dot com.
Thanks!
#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
#mytest {
float:left;
background-color: red;
width:100%;
text-align: center;
}
DEMO
Define your #menu li position: relative and define your sub menu #menu ul.sub-menu position: absolute; left: 0; top: 100%;
as this css
#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
Demo
I'm trying to create custom drop-down select like the one used on twitter when user logs out and till now I did not succeed :
This is what I achieved but is not working on IE9 :|
http://fiddle.jshell.net/Hz2JH/
<ul id="main">
<li class="username" tabindex="1" >
<a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">Log Off</li>
</ul>
</li>
</ul>
ul#main {
color: 232323;
width: 120px;
border:2px solid #ccc;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:#f1f1f1;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
So how can I build a custom select like the one used on twitter?
This works for me, doesnt require a click to get the drop down. Just add li elements to put the custom images on each menu item. Straight CSS and works on all browsers I have tested, if you find a browser that doesnt work let me know please.
#addMenu, #addMenu ul {
list-style: none;
}
#addMenu {
float: left;
}
#addMenu > li {
float: left;
}
#addMenu li a {
display: block;
padding: 0 8px;
text-decoration: none;
}
#addMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#addMenu ul li a {
width: 70px;
color: #000;
font-weight: bold;
}
#addMenu li:hover ul.noJS {
display: block;
background: #ccc;
color: #000;
}
#addMenu ul li:hover a {
background: #ddd;
}
HTML
<ul id='addMenu'>
<li>
<a href='#'>MENU</a>
<ul class='noJS'>
<li><a href='URL'>Option1</a></li>
<li><a href='URL'>Option2</a></li>
<li><a href='URL'>Option3</a></li>
<li><a href='URL'>Option4</a></li>
</ul>
</li>
</ul>