I am working on a website for a client. For the menu/navigation bar, I created one for them (they were very specific) with dropdowns, but there is one problem--when you mouse over one of the items on the dropdown, it dissappears--check it out here http://www.brandonsdesigngroup.com/menu-expamle.html.
for the code, I call jquery from google API's, then there is the javascript, the CSS, and the actual content (in an unordered list).
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#nav-one li").hover(
function(){ $("ul", this).fadeIn("fast"); },
function() { }
);
if (document.all) {
$("#nav-one li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c) {
return this.each(function(){
$(this).hover(
function() { $(this).addClass(c); },
function() { $(this).removeClass(c); }
);
});
};
</script>
CSS:
<style type="text/css">
.nav, .nav ul {
list-style: none;
margin: 0;
padding: 0;
height:20px
}
.nav {
z-index: 100;
position: relative;
}
.nav li {
border-left: 0px solid #000;
float: left;
margin: 0;
padding: 0;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-size:12px;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
font:1.22em/25px "Arial Narrow", Arial, sans-serif letter-spacing:5px;
color: #FFFFFF;
display: block;
padding: 0 10px;
text-decoration: none;
text-style: narrow;
margin-right:26px;
}
.nav li a:hover {
margin-right:26px;
color: #FFFFFF;
}
#nav-one li:hover a,
#nav-one li.sfHover a {
color: #FFFFFF;
}
#nav-one li:hover ul a,
#nav-one li.sfHover ul a {
color: #FFFFFF;
height:20px;
background-image: url(menubar/transparent.png);
}
#nav-one li:hover ul a:hover,
#nav-one li.sfHover ul a:hover {
color:#FFFFFF;
background-image:url(menubar/transparent.png);
}
.nav ul {
border-bottom: 0px solid #FFFFFF;
list-style: none;
margin: 0;
width: 100px;
position: absolute;
top: -99999px;
left: 0px;
}
.nav li:hover ul,
.nav li.sfHover ul {
top: 22px;
}
.nav ul li {
border: 0;
float: none;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-size:10px;
}
.nav ul a {
border: 0px solid #000;
border-bottom: 0;
padding-right: 50px;
margin-bottom: 0px;
width: 130px;
white-space: nowrap;
}
.nav ul a:hover {
color: #FFFFFF;
}
</style>
<style type="text/css">
body {
width: auto;
height: auto;
background-color: #3A2C21;
}
</style>
HTML:
<td background="images/menu_bg.gif" height="25"><ul id="nav-one" class="nav">
<li>
HOME
</li>
<li>
PROFILE
<ul>
<li>ABOUT</li>
<li>PEOPLE</li>
<li>SERVICES</li>
<li>TRADE SHOWS</li>
</ul>
</li>
<li>
PORTFOLIO
<ul>
<li>ARTISTIC TILE</li>
<li>ATLANTIS</li>
<li>BLANCO</li>
<li>BUTLER"S OF FAR HILLS</li>
<li>HAMPTON FORGE</li>
<li>HILAND H. TURNER</li>
<li>MIELE</li>
<li>POGGENPOHL</li>
<li>THG FAUCETS</li>
<li>TOP KNOBS</li>
<li>VIXEN HILL</li>
</ul>
</li>
<li>
PUBLIC RELATIONS
<ul>
<li>PRESS ATTENTION</li>
<li>FRANK PR</li>
<li>HITS</li>
<li>MORE HITS</li>
<li>LEVERAGING PR</li>
</ul>
</li>
<li>
CONTACT
</li>
</ul>
Problem #1: Menu disappears before cursor can reach submenu.
Usually this is due to a gap between the <li> tag and the subnavigation <ul>. A gap of even one pixel will cause the navigation to disappear before the cursor can reach the submenu.
For instance, add a padding: 0 0 10px; to .nav li in your CSS, and the problem goes away.
You could also set a specific height for the <li> to cover the problem, too.
Problem #2: Menu disappears when cursor runs over the image slideshow.
As to the problem of your menu disappearing when you reach the point where your image slideshow and menu collide, that's due to a z-index problem.
You should set the .nav to have a z-index: 200 (or anything greater than 100, according to your slideshow -- I try to go overboard). This will make sure it sits above the gallery.
Javascript
<script>
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
html
Already a Member? Login
Become a Member?
Signup
Army
Navy
Airforce
I would use the Hover Intent plug-in. It is designed for exactly this kind of usage and helps provide a more robust dropdown.
Related
I have found a simple dropdown menu which works fine by me, but only the subitem links open.
When i click 'Home' nothing happens (it should open google page), when i click 'info2' google will open.
I think it has something to do with de .js file but i just dont see it.
Hope someone can help me out with a simple trick.
$(document).ready(function(){
$("#nav > li > a").on("click", function(e){
if($(this).parent().has("ul")) {
e.preventDefault();
}
if(!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$("#nav li ul").slideUp(350);
$("#nav li a").removeClass("open");
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
}
else if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(350);
}
});
});
ul, li, td {
padding: 0;
border: 0;
vertical-align: baseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* nav menu styles */
#nav {
display: block;
width: 280px;
margin: 0 auto;
}
#nav li {font-size:19px; text-align:center;}
#nav > li > a {
display: block;
padding: 16px 18px;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #212121;
background-color: #0069b3;
}
#nav > li > a:hover, #nav > li > a.open {
color: #fff;
border-bottom-color: #384f76;
background-color: #083562;
}
#nav li ul { display: none; background: #083562; }
#nav li ul li a {
display: block;
background: none;
padding: 10px 0px;
text-decoration: none;
color: #fff;
}
#nav li ul li a:hover {
background: #014f86;
}
<!doctype html>
<html lang="en-US">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div id="w">
<nav>
<ul id="nav">
<li>Home</li>
<li>Info
<ul>
<li>info2</li>
<li>info3</li>
</ul>
</li>
</nav>
</div>
</body>
</html>
It looks like .has() method can't be use in this way because not return boolean, but jQuery object. Change this:
if($(this).parent().has("ul")) {
e.preventDefault();
}
To this and let me know if it helps you:
if($(this).parent().has("ul").length === 1) {
e.preventDefault();
}
I've reached a bit of a problem that I'm not sure how to work-around. I'm creating a vertical navigation for a website I'm working on, however all the vertical navigation menu's that I've seen display the hover drop-down menu to the right or left of the navigation. I'd like to have the drop-down menu appear under the link rather than to the side of the link.
For example: In my menu when a user hovers over or visits the "Treatments" I'd like the list "allergies & sinus, head & neck, etc" to appear below it rather than to the right.
I've tried to look around to see how I could go about doing this but haven't found any really good examples or help. I might need some javascript? I'm not sure, but if it's necessary I can add it I'm just not that familiar with javascript as I am with HTML and CSS.
My HTML:
<h4>ENT Services</h4>
<ul class="sidebar-nav">
<li>Treatments at Accent EMT
<ul class="sidebar-sub-menu">
<li><a herf="http://www.accentmd.com/florida-ent/allergy-sinus.html">Allergy & Sinus</a></li>
<li>Hearing & Balance</li>
<li>Dizziness & Imbalance Disorders</li>
<li>Parathyroid Disorders</li>
</ul></li>
<li>General & Pediatric ENT
<li>Facial Plastic & Reconstructive Surgery</li>
</ul>
My CSS:
.sidebar-nav {
height:auto;
list-style:none;
width: 100%;
}
.sidebar-nav li {
height: 25px;
margin: 0;
padding: 5px 0;
border: none;
text-align: left;
display: inline-block;
float: left;
clear:both;
width: 50%;
}
.sidebar-nav li a {
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:13px;
text-decoration:none;
}
.sidebar-nav li ul {
display: none;
margin-top: 10px;
padding: 0;
}
.sidebar-nav li:hover ul {
display: block;
}
.sidebar-nav li:hover .sidebar-sub-menu {
position: relative;
margin-top: -27.5px;
}
.sidebar-sub-menu li {
position: relative;
display: block;
top: 0;
left:90%;
width: 100%;
min-width: 180px;
white-space: nowrap;
z-index:1;
}
.sidebar-sub-menu li a {
display: inline-block;
padding: 0 10px;
}
.sidebar-nav li:active .sidebar-sub-menu {
position: relative;
margin-top:-27.5px;
}
Thanks in advance.
I reworked your CSS a bit to best isolate the desired behavior, maybe from here on you can keep tweaking the rest to your benefit. Note you've also had a typo on the allergy & sinus <a href=""> (says <a herf="">)
.sidebar-nav {
height: auto;
list-style: none;
width: 100%;
}
.sidebar-nav li {
/* height: 25px; */
margin: 0;
padding: 5px 0;
border: none;
text-align: left;
display: inline-block;
float: left;
clear: both;
width: 50%;
}
.sidebar-nav li a {
font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size: 13px;
text-decoration: none;
}
/* added CSS */
.sidebar-nav li {
list-style-type: none;
}
.sidebar-nav ul li a:hover {
background: lightgray;
}
.sidebar-nav ul {
display: none;
margin-top: 10px;
padding: 0;
}
.sidebar-nav li:hover>ul {
display: block;
margin: 0;
padding: 0 10px;
}
<h4>ENT Services</h4>
<ul class="sidebar-nav">
<li>Treatments at Accent EMT
<ul class="sidebar-sub-menu">
<li>Allergy & Sinus</li>
<li>Hearing & Balance</li>
<li>Dizziness & Imbalance Disorders</li>
<li>Parathyroid Disorders</li>
</ul>
</li>
<li>General & Pediatric ENT
<li>Facial Plastic & Reconstructive Surgery</li>
</ul>
You could try something like this;
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: none;
}
a:hover + div {
display: block;
}
</style>
</head>
<body>
<a>Hover me timberrrs!!</a>
<div>here is your stuff</div>
</body>
</html>
A few hours back I asked a question on how my background disappeared when i added a collapsible list. The solution they gave me was:
body.ui-overlay-a {
background-color: #dc143c;
}
div.ui-page-theme-a {
background-color: transparent;
}
I asked the same person about the blue box and he gave me this:
div.ui-page-theme-a {
background-color: transparent;
}
But this didn't work does anyone have any answers?
Navigation bar code (CSS):
/* Navigation bar */
.nav {
font-family: 'Roboto', sans-serif;
margin-top: 20px;
height: 40px;
background: #000000;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav ul li {
list-style: none;
}
.nav ul li a {
text-decoration: none;
float: right;
display: block;
padding: 10px 50px;
color: white;
}
.nav ul li a:hover {
color: #D3D3D3;
}
.headerBreak {
width: 100%;
height: 0;
border-bottom: 2px solid #000000;
}
h4 {
font-family: 'Roboto', sans-serif;
font-size: 24px;
text-align: right;
text-decoration: none;
}
p {
font-family: 'Lato', sans-serif;
font-size: 30px;
}
And this is the content inside the navigation bar (inside )
<div class="nav">
<ul>
<li>Contacts</li>
<li>Map</li>
<li>Reservations</li>
<li>Online Order</li>
<li>Menu</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
<div class="headerBreak"></div>
Note that this does not only apply to the navigation bar but also applies to my and
Reference: http://i.imgur.com/acnJE5Y.png
Edit 1: I added this website to a free domain hoster, I have also added outline: none; to nav ul li a { but it still doesnt work when i open itbut when I duplicate the file and I open it the text does not have the blue outline, but in my original file it does
http://marcxu88.000webhostapp.com
If you could inspect the code and see if what is wrong it would be greatly appreciated.
Thanks in advance.
Try adding outline: none; to the selector .nav ul li a.
I have a horizontal responsive menu that works great, here is link to the page with it
I tried to make a new one with dropdown menus but can't get it to work. Instead of having a dropdown appear on hover, it shows the menus automatically in the line below. Here is link to codepen showing the errors http://codepen.io/mlegg10/pen/akLaVA
$(document).ready(function() {
$('nav').prepend('<div id="responsive-nav" style="display:none">Menu</div>');
$('#responsive-nav').on('click', function() {
$('nav ul').slideToggle()
});
$(window).resize(function() {
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display', 'block');
$('nav ul').hide()
$('#responsive-nav').show()
} else {
$('nav ul li').css('display', 'inline-block');
$('nav ul').show()
$('#responsive-nav').hide()
}
});
$(window).resize();
});
$(document).on('scroll', function() {
if ($(document).scrollTop() > 100) {
$('#nav').addClass('fixed')
} else {
$('#nav').removeClass('fixed')
}
});
body {
margin: 0;
font-family: Georgia;
}
#menu-bar {
width: 100%;
height: auto;
margin: 50px auto 0;
background-color: #ff4500;
text-align: center;
}
#header h1 {
padding: 15px 0;
margin: 0;
}
#nav {
background-color: #036;
text-align: center;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0
}
#nav ul li {
display: inline-block;
padding: 5px 0;
margin: 0;
}
#nav.fixed {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
nav ul li a {
padding: 0 5px;
text-decoration: none;
color: #fff;
}
nav ul li:hover {
background-color: #ff0000;
}
#responsive-nav {
cursor: pointer;
color: #fff;
font-family: Georgia;
font-weight: bold;
padding: 5px 0;
}
#content {
width: 90%;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #ddd;
padding: 5px;
}
#drop-nav li ul li {
border-top: 0px;
#drop-nav li ul li {
border-top: 0px;
}
ul li a {
display: block;
background: #036;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #f00;
}
**this part is in the head tags:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://responsive-nav.com/demo/responsive-nav.js"></script>**
<header id="menu-bar">
<nav id="nav">
<ul>
<li>Home
</li>
<li>Accomodations
</li>
<li>Amenities
</li>
<li>Rates
</li>
<li>Links
<ul>
<li>Dropwdown 1
</li>
<li>Dropdown 2
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Your javascript code has lots of unclosed line endings - you are missing the semicolons quiet often.
Additionally, jQuery will apply nav ul to all elements it finds. Meaning if there is a second occurrence, which is the case in your case, it will be applied to that too.
Instead: you should give your level 0 menu a clean, identifiable class, which you can preciesly target:
<!-- Your new HTML Markup -->
<nav class="mother-of-all-dropdown-lists">
and then in your jQuery:
$('.mother-of-all-dropdown-lists').slideToggle();
Sorry, that I keep writing, there are jQuery selectors wrong as well:
The id / hashtag is missing, so..:
$('nav ul li').css('display','inline-block');
$('nav ul').show()
should be:
$('#nav ul li').css('display','inline-block');
$('#nav ul').show();
I have a floating horizontal navbar positioned using jQuery. It's perfect when the page is static, but as soon as I start scrolling, the navbar's height increases and I am unsure why.
I've a JSFiddle here to show the unwanted effect
Here's the html
<div id="stickyribbon">
<ul>
<li>Week1
</li>
<li>Week2
</li>
<li>Week3
</li>
<li>Week4
</li>
<li>Week5
</li>
<li>Week6
</li>
</ul>
</div>
Here's the css
#stickyribbon {
width:800px;
background: orange;
border-radius: 5px;
}
#stickyribbon ul {
display:table;
width:100%;
list-style-type: none;
}
#stickyribbon li {
display:table-cell;
font-size: 16px;
font-weight: bold;
vertical-align:middle;
}
#stickyribbon li a {
display:block;
color: #fff;
text-decoration: none;
}
#stickyribbon li a:hover {
color: yellow;
}
And lastly the JavaScript
$(function () {
var stickyRibbonTop = $('#stickyribbon').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyRibbonTop) {
$('#stickyribbon').css({
position: 'fixed',
top: '0px'
});
} else {
$('#stickyribbon').css({
position: 'static',
top: '0px'
});
}
});
});
I'd be grateful for any guidance, as I'm completely stumped.
TIA
You can change your CSS to the below, crucially you need to correctly define positioning, padding and margins to establish the layout in both states:
Demo Fiddle
#stickyribbon {
width:800px;
background: orange;
border-radius: 5px;
position:static;
top:0;
margin:15px 0;
}
#stickyribbon ul {
display:table;
width:100%;
list-style-type: none;
padding:0;
margin:0;
}
#stickyribbon li {
display:table-cell;
font-size: 16px;
font-weight: bold;
vertical-align:middle;
padding:0 40px;
}
#stickyribbon li a {
display:block;
color: #fff;
text-decoration: none;
}
#stickyribbon li a:hover {
color: yellow;
}
The div #stickyribbon has some margin and when the page is scrolled, the div is redrawn to fill that margin.
Add
margin:0;
to #stickyribbon ul and #stickyribbon li.