I've been using the following CSS dropdown box on my website, and I've noticed that when you click to activate the dropdown on an ipad/iphone, there is no way to close the dropdown menu other than refreshing the page.
Is there a JS code that I can add to the bottom of the dropdown box for tablet/phone users so they can close the box if they don't make a selection?
/* css */
#dropdown {
}
#dropdown ul {
}
#dropdown li {
}
.dropmain1 {
background: #f2f2f2 url(images/gradients/drop1bg.jpg) repeat-x;
width: 98px;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
margin-top: 10px;
-moz-box-shadow: 3px 9px 8px #888;
-webkit-box-shadow: 3px 9px 8px #888;
box-shadow: 3px 9px 8px #888;
}
.dropmain2 {
background: #f2f2f2 url(images/gradients/drop1bg.jpg) repeat-x;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding: 5px;
-moz-box-shadow: 3px 5px 8px #888;
-webkit-box-shadow: 3px 5px 8px #888;
box-shadow: 3px 5px 8px #888;
}
#drop2 { width: 633px; margin-top: 10px; padding: 9px; }
#drop3 { width: 200px; margin-top: 10px; padding: 9px; }
#drop4 { width: 200px; margin-top: 10px; padding: 9px; }
#drop5 { width: 200px; margin-top: 10px; padding: 9px; }
/*this is the css for the horizontal version*/
.horizontal ul{
border: none;
list-style-type: none;
padding:0;margin:0;
}
.horizontal ul li{
float: left;
position: relative;
margin:0;padding:0;
}
a.toplevel {
display: block;
color: #525252;
text-decoration: none;
overflow: hidden;
display:inline-block;
padding-left:15px;
padding-right: 15px;
line-height:18px;
background:transparent url(images/misc/menu_open.gif) center left no-repeat;
}
.horizontal li li{
float: none;
margin-bottom: -1px;
}
.horizontal li li.last{
border-bottom: none;
}
.horizontal ul li ul{
position: absolute;
top: 1.3em;
left: -1px;
}
.horizontal ul ul ul{
width: 130px;
top: -1px;
left: 128px;
margin-top: 0;
}
.horizontal.left ul ul ul,.horizontal .left ul ul{
top: -1px;
left: -128px;
}
.horizontal ul li li a{
padding: 12px;
}
.horizontal ul li:first-child>a{
}
.horizontal ul li a.first{
}
.horizontal ul li li a.first{
}
.horizontal ul li li:first-child>a{
}
div.horizontal ul li.pixelfix ul{
left: 0;
}
div.horizontal ul li.pixelfix ul ul{
left: 128px;
}
/*here we use a little CSS to make a basic/backup dropdown menu in modern browsers *cough* not IE6 or less *cough* if javascript is disabled.Flickering never happens in these browsers*/
.mlmenu li ul{
display: none;
}
.mlmenu li:hover>ul{
display: block;
}
/*This section makes the menu not work in non-javascript enabled browsers by not showing the menu by default-This can be worked around by making top level links point to a sitemap*/
.accessible li ul{
display: block;
}
/*Code to show an element has a child*/
.mlmenu.plus li a:first-child:not(:last-child):after{
content: ' ';
}
.plus a span{
padding-left: .5em;
}
.noshow{
visibility: hidden;
}
/*colors for menu*/
}
.bluewhite li a{
background-color: ;
color: #ffffff;
}
.bluewhite li a:hover,.bluewhite li a.first:hover,.bluewhite .trail a.hover{
/* HOVER */
}
.bluewhite li:first-child>a:hover{
}
.bluewhite ul{
border-color: #000033;
}
#ldrop a:link, #ldrop a:visited {
}
#ldrop a:hover, #ldrop a:active {
}
#holdjump1 {
padding-left: 8px; padding-bottom: 6px;
}
#holdjump1 div {
}
#holdjump1 a:link, #holdjump1 a:visited {
padding: 2px 0 2px 3px; margin:0;
}
#holdjump1 li {
padding:0; margin:0;
}
.fjl {
display: inline-block;
border-bottom: 1px dotted #c1c1c1;
width:30%;
margin: 0 5px 0 5px;
padding: 2px;
font-size: 12px;
font-weight: normal;
}
.fjl a:link, .fjl a:visited {
display: block;
}
.fjl a:active, .fjl a:hover {
background: #a1a1a1;
text-decoration: none;
color: #ffffff;
}
<div id="dropdown" class="mlmenu horizontal bluewhite blindv plus inaccessible delay">
<ul>
<li>Menu Link</li>
<ul> <li>test</li> </ul>
</ul>
</div>
oops!, I just noticed I had posted the wrong "order" of the ul list.
I posted
$('div#dropdown ul li').click
when it actually should be
$('div#dropdown li ul').click or
$('div#dropdown li ul li').click
What I previously posted was for the main links to be opened and closed. The new method I am posting will open close the sub menu. UL inside of the LI. To add more submenu functioning, just keep adding on to the element.
$('div#dropdown li ul // 1-level drop down
$('div#dropdown li ul li ul // 2-level drop down
$('div#dropdown li ul li ul li ul // 3 level drop down.
Or you could just create classes for each level. Example
instead of a 2-level drop being
$('div#dropdown li ul li ul
you could just do something like this >>
Example menu with a 2-level sub menu
<ul>
<li>link1<ul class="sub1">
<li>sublink1-1<ul>
<li>sub-sublink1-1</li>
<li>sub-sublink1-2</li></ul></li></ul></li>
</ul>
Jquery
<script>
$(document).ready(function() {
$('ul.sub1').click(function() {
$(this).slideToggle();
});
});
</script>
That would cause the 2nd level sub menus to slide up or slide down on click, thus "showing" and "hiding".
Hope this helped a little more!
You can try using JQuery. I'm not sure how to do it in full blown javascript but if you download the jquery library, link to it, and then try something like this it might work.
<script>
$(document).ready(function() {
$('div#dropdown ul li').click(function() {
$(this).show();
$('div#dropdown ul li').click(function() {
$(this).hide();
});
});
});
</script>
or
<script>
$(document).ready(function() {
$('div#dropdown ul li').click(function() {
$(this).slideDown();
$('div#dropdown ul li').click(function() {
$(this).slideUp();
});
});
});
</script>
Related
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.
I have this menu bar: http://jsfiddle.net/PtQAP/
and I need to put it to the bottom and the drop-down menu change to drop-up menu.
How would I do that?
css:
ul, li, a {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
ul > li {
float: left;
}
ul > li a {
color: #fff;
font-weight: bold;
line-height: 40px;
height:40px;
display:block;
padding:0px 10px;
}
ul li a:hover {
background: #666666;
}
ul li ul {
display: none;
position: absolute;
background: #333333;
}
ul li ul li {
float: none;
line-height: 40px;
height: 40px;
}
Thanks for the answers.
give the bar a position of fixed, and set its bottom to 0px, then set your menu to have a bottom of the height of your bar, in this case 40px
div {
background: #999999;
height: 40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000000;
margin: -8px;
width:100%;
position:fixed;
bottom:0px;
left:0px;
}
ul li ul {
display: none;
position: absolute;
background: #333333;
bottom:40px;
}
JSFiddle Demo
I created a responsive navigation menu, but for some reason I can't get it to start out closed.
If you look at the website here http://riprap.pdslo.com and re-size your screen to a phone or tablet size, then hit refresh you will see that it is open on page load.
Here is the code if anyone would like to take a stab at it and try to get the menu to close on page load.
(I apologize for the code dump, just not sure where I went wrong.)
I would greatly appreciate any help.
-----HTML Code-----
<nav id="menu-wrap">
<ul id="menu">
<li>Home</li>
<li>bla bla</li>
</ul>
</nav>
-----JS Code-----
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').css('visibility','visible');
}).mouseout(function(){
$(this).children('ul').css('visibility','hidden');
})
}
/* Mobile */
$('#menu-wrap').prepend('<div id="menu-trigger">Menu</div>');
$("#menu-trigger").on("click", function(){
$("#menu").slideToggle();
});
// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('#menu ul').addClass('no-transition');
});
</script>
-----CSS Code-----
#menu-wrap{display:none;}
/* Mobile */
#menu-trigger {
display: none;
}
#menu .top-list{display:none;}
/* nav-wrap */
#menu-wrap {
position: relative;
display:none;
}
#menu-wrap * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* menu icon */
#menu-trigger {
display:none; /* show menu icon */
height: 45px;
line-height: 45px;
cursor: pointer;
color: #FFFFFF;
font-weight: 700;
background-color: #063346;
text-align:center;
font-family:"Bitter",sans-serif;
font-size:24px;
}
/* main nav */
#menu {
margin: 0;
position: relative;
width: 100%;
z-index: 1;
background-color: #034A68;
display: block;
box-shadow: none;
}
/* #menu:after {
content: '';
position: relative;
left: 25px;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #444;
}*/
#menu ul {
position: relative;
visibility: visible;
opacity: 1;
margin: 0;
background: none;
box-shadow: none;
}
#menu ul ul {
margin: 0 0 0 20px !important;
box-shadow: none;
}
#menu li {
position:relative;
display: block;
float: none;
border: 0;
box-shadow: none;
width:100%;
}
#menu ul li{
margin-left: 20px;
box-shadow: none;
}
#menu a{
border-top: 1px solid #063346;
color: #FFFFFF;
display: block;
float: none;
padding: 10px 0;
text-align: center;
text-decoration: none;
}
#menu a:hover{
color: #FFFFFF;
background:#045072;
}
#menu ul a{
padding: 0;
width: auto;
}
#menu ul a:hover{
background: none;
}
#menu ul li:first-child a:after,
#menu ul ul li:first-child a:after {
border: 0;
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#menu-wrap{display:block;}
#menu .top-list{display:none;}
/* Mobile */
#menu-trigger {
display: block;
}
}
#media only screen and (max-width: 767px) {
#menu-wrap{display:block;}
#menu .top-list{display:block;}
/* Mobile */
#menu-trigger {
display: block;
}
}
In line 140 (the last part) of the css you have to add following:
#menu { display:none; }
So the menu is hidden in the beginning on screens lower than 767px.
I have got a task to create a horizontal menu.Each menu has child and these child has sub child. But when I selecting the sub menu there is a separation between these child and sub child. I want to clear the child right side border when it selected and also discard the first sub child's left border. You can check this on http://jsfiddle.net/ucpcA/.
How can i solve this problem?
The css page is
#wrapper {
width:100%;
height:500px;
}
h2 {
color:#787878;
}
#menu, #menu ul {
list-style: none;
padding: 2px;
}
#nav{
border-bottom: 1px solid #CCCCCC;
border-spacing: 0;
display: table;
float: left;
height: 25px;
width: 100%;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav > ul > li:hover {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #ccc #ccc #FFFFFF;
border-style: solid;
border-width: 1px;
padding-bottom: 0;
border-radius:1px;
}
.menu-child {
width:160px;
display:block !important;
}
/*
#menu ul li ul {
border-radius:0px;
border-color:#fff #ccc #ccc #ccc !important;
}
*/
#nav ul li ul li:hover {
//border:0px;
//border-color: #ccc #FFFFFF #FFFFFF #ccc;
}
#nav ul li ul :hover {
//border:0px;
//border-color: #FFFFFF #ccc #ccc;
}
#menu {
float: left;
height: 25px;
}
#menu> li {
float: left;
}
#menu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#menu ul {
position: absolute;
display: none;
z-index: 999;
}
#menu ul li a {
/*width: 80px;*/
}
#menu li:hover ul {
display: block;
}
#menu {
font-family: Arial;
font-size: 12px;
//background: #F8F8F8;
}
#menu > li > a {
font-family: Verdana, Arial, sans-serif;
font-style: normal;
color:#787878;
font-weight: bold;
}
#menu > li > a:hover {
/*color: #000;*/
}
#menu ul {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
#menu ul li a {
color: #000;
}
#menu ul li a:hover {
background: #E0E0E0;
}
.logout {
float:right;
width:300px;
}
.title {
float:left;
width:300px;
}
#footer {
width:100%;
height:100px;
float:left;
}
.subchild-list {
margin:0;
position: absolute !important;
top:0;
right:-89px;
//border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
.child-list ul {
display: none !important;
position: absolute !important;
z-index: 999 !important;
}
.child-list li {
position:relative !important;
}
.child-list li:hover ul {
display: block !important;
}
.child-list li{
border-left:1px solid #C0C0C0;
border-right:1px solid #C0C0C0;
}
.child-list ul{
border-top:1px solid #C0C0C0;
border-bottom:5px solid #C0C0C0;
}
.child-list{
border-bottom:5px solid #C0C0C0;
}
.nav-subchild
{
border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
Below 2 css properties will do the needful.
ul#menu li ul.child-list li.menu-child:hover { border-right:0 !important; }
li.menu-child ul li:first-child { border-left:0 !important; }
why are you re-inventing the wheel? you can use jquery menu, and if you want it horizontal there are proven ways of doing that as well. I do this whenever I want to solve a very old and classic problem.
the best way to win a battle is by not having to fight one.
I'd like some help figuring out how to re-code the following fly-out menu function:
var site = function() {
this.navLi = $('#dnoa_nav li ul li').children('ul').hide().end();
this.init();
};
site.prototype = {
init : function() {
this.setMenu();
},
setMenu : function() {
$.each(this.navLi, function() {
if ( $(this).children('ul')[0] ) {
$(this)
.append('<span />')
.children('span')
.addClass('hasChildren')
}
});
this.navLi.hover(function() {
$(this).find('> ul').stop(true, true).slideDown('fast');
},
function() {
$(this).find('> ul').stop(true, true).hide();
});
}
}
new site();
You can see it in action here to see what it does right now. Once you see it in action, you'll see that I cannot get the parent LI's to remain "sticky" once you have chosen a child LI. For example: Job Aides > Contacts > Approved Brokers ... and what I mean by that is that the parent LI's (Job Aides and Contacts)do not remain in their hover state when the child LI is being moused over (Approved Brokers).
What I would like for the script to do is to keep the parent LI's in their hover state as a child LI is selected. Looking something like this:
Any ideas on what I can tweak in the function which I have pasted above? Thank you so much in advance!
UPDATE
Below is a copy of my CSS (and I hope that I haven't made a mess):
/* DNoA Nav menu */
.hasChildren {
position: absolute;
width: 11px; height: 24px;
background-image: url('/test/img/page/bkgd_navigation_subcell_hint.gif');
right : 0;
bottom: 0;
}
#dnoa_nav {
float: left;
margin: 0;
padding-top: 3px;
padding-left: 19px;
}
#dnoa_nav li a, #dnoa_nav li {
float: left;
}
#dnoa_nav li {
list-style: none;
position: relative;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.3px;
}
#dnoa_nav li a {
padding: 17px 16px;
text-decoration: none;
color: white;
}
#dnoa_nav li:hover a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}
/* DNoA Nav submenu */
#dnoa_nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0;
margin: 0;
}
#dnoa_nav li:hover > ul {
display: block;
}
#dnoa_nav li ul li {
_display: inline; /* for IE6 */
}
#dnoa_nav li ul li a {
background: #eeeeee;
padding-top: 8px;
padding-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
width: 175px;
font-weight: normal;
color: #005CA9;
display: block;
}
#dnoa_nav li ul li, #dnoa_nav li ul li a {
float: none;
background-image: none !important;
}
#dnoa_nav li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif') !important;
background-repeat: repeat;
color: #FFFFFF;
}
/* DNoA Nav subsubmenu */
#dnoa_nav li ul li ul {
display: none;
position: absolute;
left: 93%;
top: 7px;
padding: 0;
margin: 0;
border-top: 1px solid #CCCCCC;
z-index: 9999;
}
#dnoa_nav li ul li:hover > ul {
display: block;
}
#dnoa_nav li ul li ul li {
_display: inline; /* for IE6 */
}
#dnoa_nav li ul li ul li a {
background: #f8f8f8;
padding-top: 8px;
padding-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
width: 175px;
font-weight: normal;
color: #005CA9;
display: block;
}
#dnoa_nav li ul li ul li, #dnoa_nav li ul li ul li a {
float: none;
background-image: none !important;
}
#dnoa_nav li ul li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif') !important;
background-repeat: repeat;
color: #FFFFFF;
}
Thanks,
Berklie
I finally got things how I wanted to work... based on the fact that Stack Overflow folks helped to point me in the correct direction: it was the CSS that needed tweaking, not the jQuery function. I ended up re-learning about CSS Selectors and how the use of the "greater than" sign ( ">" ) will allow the CSS to only directly affect a direct child LI of the parent UL... and not cascade down to every other child LI and UL (which was the problem that I was having when I styled the top-most UL and LI). So, these statements were edited to make it work:
#dnoa_nav li:hover a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}
Was edited to:
#dnoa_nav li:hover > a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}
And this:
#dnoa_nav li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif');
background-repeat: repeat;
color: #FFFFFF;
}
Was edited to:
#dnoa_nav li ul li:hover > a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif');
background-repeat: repeat;
color: #FFFFFF;
}
Thanks again for leading me on a path to learn about CSS Selectors,
Berklie