I am trying to get my nav bar dropdown list to work using JavaScript.
I got everything working except for when I hover over the rest of the items, the dropdown only shows up under the first link? I tried working around it and putting it in lists but I'd rather not and when I do I just then end up ruining the whole nav bar.
Here's what I mean:
style.css
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#title {
background-color:white;
float: left;
padding-left: 2%;
position: absolute;
padding-top: 1.5%;
}
#nav {
background-color: white;
height: 79px;
min-width: 600px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 2;
}
#nav a {
text-decoration: none;
}
#nav a:link {
color: grey;
}
#nav a:hover {
background-color: lightgrey;
}
#nav a:visited {
color: maroon;
}
#nav a:active {
color: maroon;
}
#navLink {
padding-top: 2.5%;
padding-right: 2%;
letter-spacing: 3px;
float: right;
}
#navLink div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: whitesmoke;
}
#navLink div a {
position: relative;
display: block;
margin: 0;
width: auto;
padding: 5px 10px;
text-align: left;
}
.container {
width: 100%;
}
#content {
padding-top: 10%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom:0px;
left:0xp;
width:100%;
color:white;
clear:both;
text-align:center;
padding:5px;
}
.stopFloat {
clear:both;
left: 0px;
right: 0px;
bottom: 0px;
}
Here's my navbar code snippet:
<div id="nav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div id="navLink">
<a href="index.html"
onmouseover="dropDown('dd1')"
onmouseout="closeddtime()">Home</a>
<div id="dd1"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
Video
Who
What
</div>
<a href="02_advLayout/index.html"
onmouseover="dropDown('dd2')"
onmouseout="closeddtime()">Content</a>
<div id="dd2"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
About Us
Coffee
Shop
Class
</div>
<a href="05_js_fw/index.html"
onmouseover="dropDown('dd3')"
onmouseout="closeddtime()">JS Framework</a>
<div id="dd3"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
Video
Who
What
</div>
Labs
</div>
</div>
The issue is with your DOM structure. In your code, you have to give separate left offsets for each drop-down to display it properly under the parent. But in case you are changing the navigation later, you have to adjust the css also to maintain alignment.
So i feel it is better to restructure your code. May be you can refer the below navigation. It is a simple css navigation with out any js.
ul, li{
margin: 0;
padding: 0;
list-style: none;
}
li{
position: relative;
display: inline;
margin: 0 20px;
}
li ul{
position: absolute;
width: 150px;
left: 0;
top: 100%;
display: none;
}
li:hover ul{
display: block;
}
li ul li{
display: block;
margin: 10px 0;
}
<div id="nav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div id="navLink">
<ul>
<li>Menu</li>
<li>Menu
<ul>
<li>Sub menu</li>
<li>Sub menu
</li>
<li>Sub menu</li>
<li>Menu</li>
</ul>
</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ul>
</div>
</div>
Related
I am new to Jquery and
I am trying to make a dropdown on my navigation using simple Jquery hover effect, and I think I am using wrong selector on Jquery.
I would like to see the dropdown and be able to navigate when i hover over 'What's New'
Any help would be awesome. Thanks,
See ATTACHED IMG
$(document).ready(function () {
$("li .nav-level-1").hover(
function () {
$('.nav-level-2').slideDown('200');
},
function () {
$('.nav-level-2').slideUp('200');
}
);
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
You should use a nested ul for your dropdown menu. You don't need jQuery at all for this. It can all be done with CSS. Take a look at this simple hover effect under the Products tab.
Codepen
HTML
<header class="navbar">
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Cars
<ul>
<li>Ford</li>
<li>Chevy</li>
<li>Toyota</li>
</ul>
</li>
<li>Trucks</li>
<li>Vans</li>
<li>SUVs</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</header>
CSS
header {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
background-color: #2EBAE8;
}
.container {
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
ul {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
width: 200px;
background-color: #046382;
display: none;
position: absolute;
top: 100%;
left: 0;
float: none;
}
ul ul ul {
top: 0;
left: 100%;
}
ul ul li {
float: none;
}
ul li {
float: left;
padding: 0 10px;
position: relative;
}
ul li:hover > ul {
display: block;
}
ul a {
display: block;
text-decoration: none;
color: white;
line-height: 50px;
transition: color 0.5s;
}
ul a:hover {
color: #E82E82;
}
Your submenu is hidden with visibility: hidden style.
I also separated the handled so that the menu doesn't hide while you're hovering it, and added finish() so that we're not queueing animations.
But yeah, like ncox85 said you should do this with css.
$(document).ready(function () {
$('.nav-level-2').hide();
$("li .nav-level-1").mouseenter(
function () {
$('.nav-level-2').finish().slideDown('200');
}
);
$("li .nav-level-2").mouseleave(
function () {
$('.nav-level-2').finish().slideUp('200');
});
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
Just use display:none instead of visibility:hidden on class .nav-level-2
If any of you are wondering, I got a good result from just using html/css, got rid of jquery.
Maybe I will use jquery another time. fun lesson for myself and those of you out there. Thanks guys
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display: block;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
The navigation bar appears to be centered on my 15 inch laptop. But when I view it on a 27inch mac it is floated to the left and it is off center. I'm not totally sure how to center this so it appears to be centered on all monitors.
SITE ON SERVER
.navContainter{
width: 960px;
}
.nav {
height:60px;
background-color: rgba(0, 0, 0, 0.7);
position: -webkit-sticky;
list-style-type: none;
}
.nav ul {
float: left;
margin: 0 auto;
padding-left: 0px;
padding-top: 10px;
}
ul{
display: inline;
padding: 0;
}
li{
display:inline;
padding:5px;
font-size: 1.5em;
float: left;
margin-right: 50px;
margin-left: 100px;
position: relative;
font-family: "Josefin Slab",serif;
}
a{
width:60px;
color: #fff;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
<head class="navContainer">
<nav class="nav">
<ul>
<li>WEB</li>
<li>PHOTOGRAPHY</li>
<li><img src="img/demo/_small/logo.png"></li>
<li>DESIGN</li>
<li>VIDEO</li>
</ul>
</nav>
For .nav add text-align: center;
For .nav ul remove float: left; and add display: inline-block;;
I have 5 social media buttons in a row, 2 of which have menus which are triggered by jquery slidetoggle. The problem is, that when the twitter button is clicked it rearranges the icons as the menu appears and knocks them all out of place. How do i prevent this?
Here is my code:
$(".button").click(function() {
$(this).closest('.comment').find(".box").toggle();
});
#icons {
width: 450px;
padding: 0px!important;
}
.comment {
width: 140px;
float: right;
}
.button {
width: 25px;
display: inline;
margin-right: 5px;
vertical-align: top!important;
height: 25px;
}
.box {
margin-top: -20px;
width: 25px;
}
.box ul {
width: 80px;
height: 35px;
padding: 10px;
background-color: #fff;
}
ul.tw {
border: 0px;
}
li.normal {
margin-right: 25px!important;
width: 80px;
}
li.tw {
margin-right: 60px;
width: 80px;
}
#hidden {
display: none;
}
li {
padding: 0!important;
list-style-type: none;
float: right;
}
a {
padding: 0 !important;
font-family: Arial;
font-size: 12px !important;
text-decoration: underline !important;
color: #000000 !important;
padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<body>
<div id="icons">
<div class="comment">
<div class="button">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/facebook_icon.png">
</div>
<div class="box" id="hidden">
<ul class="normal">
<li class="normal">DocJohnson
</li>
<li class="normal">Ask The Doc
</li>
</ul>
</div>
</div>
<div class="comment">
<div class="button">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/twitter_icon.png">
</div>
<div class="box" id="hidden">
<ul class="tw">
<li class="tw">DocJohnson
</li>
<li class="tw">Ask The Doc
</li>
</ul>
</div>
<div class="button">
<a href="http://docjohnsonusa.tumblr.com/" target="_blank">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/tumblr_icon.png" id="socialImage" />
</a>
</div>
<div class="button">
<a href="https://www.youtube.com/user/DOCJOHNSON1976" target="_blank">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/youtube_icon.png" />
</a>
</div>
<div class="button">
<a href="http://instagram.com/docjohnsonusa" target="_blank">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/instagram_icon.png" />
</a>
</div>
</div>
</body>
Fiddle
Not sure if it can break your layout, but it worked adding position:absolute to the #hidden element:
#hidden {
display:none;
position: absolute;
margin-top: -10px;
}
Fiddle. Also added margin-top: -10px because the .box value of -20px was making the div get over the button.
There are a number of CSS things to fix. But the main thing is a combination of position relative and absolute to make the dropdowns position properly.
http://codepen.io/anon/pen/WvLwdx
#icons {
text-align: center;
}
.comment {
display: inline-block;
}
.button {
position: relative;
display: inline-block;
margin-right: 5px;
vertical-align: top;
}
.box {
position: absolute;
top: 30px;
right: 0;
}
.box ul {
margin: 0;
background-color: #fff;
}
ul li {
display: block;
}
.hidden {
display: none;
}
a {
padding: 0 !important;
font-family: Arial;
font-size: 12px !important;
text-decoration: underline !important;
color: #000 !important;
padding-left: 10px;
}
I have copied all of your code to a jsFiddle, all you need to do is add position: absolute to your .box class like so
jsFiddle : https://jsfiddle.net/g1Lfg7y5/
CSS
#icons {
width: 450px;
padding: 0px!important;
}
.comment {
width: 140px;
float: right;
}
.button {
width: 25px;
display: inline;
margin-right: 5px;
vertical-align: top!important;
height: 25px;
}
.box {
margin-top: -20px;
width: 25px;
position: absolute;
}
.box ul {
width: 80px;
height: 35px;
padding: 10px;
background-color: #fff;
}
ul.tw {
border: 0px;
}
li.normal {
margin-right: 25px!important;
width: 80px;
}
li.tw {
margin-right: 60px;
width: 80px;
}
#hidden {
display: none;
}
li {
padding: 0!important;
list-style-type: none;
float: right;
}
a {
padding: 0 !important;
font-family: Arial;
font-size: 12px !important;
text-decoration: underline !important;
color: #000000 !important;
padding-left: 10px;
}
I see lots of inconsistencies here.
First of all turn hidden into a class. It repeats itself more than once so it can't be an id.
Then try:
.hidden
{
display: none;
position: absolute;
z-index: 1000;
}
I tested it and it worked.
I wanted to create a navigation bar like this, " Artist News HH Blog Contact " With HH being the title of the page. I want the navigation alongside the heading. I attempted it but it isn't right and its very untidy.
<div id="heading">
<header>
<section class="main-nav index-nav">
<nav>
<ul>
<li>Artists</li>
<li>News</li>
<h1>HH</h1>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</section>
<!--section-->
</header>
</div>
heres my code
There's a few things wrong with your code, mainly the invalid html around the <h1>HH</h1> bit.
I updated your CSS as well to position the HH properly in between the other links. I change your h1 css as well as .main-nav h1.
Also if you remove the width: 10%; from the h1 css it will fix the border on the heading.
h1 {
text-align: center;
font-size: 50px;
padding-bottom: 1px;
margin-top: 0px;
border-bottom: 6px solid black;
}
#heading {
position: fixed;
z-index: 1;
width: 100%;
height: 134px;
text-align: left;
padding: 1em 0;
border-bottom: 2px solid black;
top: 0;
background-color: #f6f6f6;
}
/*================================================================================================================================*/
/* navigation styles*/
.main-nav-scrolled {
width: 100%;
position: fixed;
top: 0;
}
.main-nav a {
text-decoration: none;
color: Black;
text-transform: uppercase;
font-weight: 600;
display: block;
padding: 10px 10px;
opacity: 1;
}
.main-nav h1 {
font-weight: normal;
}
nav {
width: 100%;
margin: 0 auto;
position: relative;
}
nav ul {
display: inline-block;
list-style: none;
position: absolute;
text-align: center;
vertical-align: middle;
width: 100%;
margin-top: -1.7%;
margin-left: -5%;
}
nav ul li {
display: inline-block;
margin-left: 6%;
padding: 3px
}
.main-nav h1 a {
position: relative;
color: #000;
text-decoration: none;
}
/* navigation hover styles*/
/* nav ul */
nav ul a {
position: relative;
color: black;
text-decoration: none;
}
nav ul a:hover {
color: #000;
}
nav ul a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
top: -3px;
left: 0;
background-color: black;
visibility: hidden;
-webkit-transform: scaleX (0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav ul a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/*================================================================================================================================*/
<div id="heading">
<header>
<section class="main-nav index-nav">
<nav>
<ul>
<li>Artists
</li>
<li>News
</li>
<li>
<h1>HH</h1>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</nav>
</section>
<!--section-->
</header>
</div>
Move the <h1> element into a <li> and remove some of the css. Here is what my final looks like, and it works.
h1{
text-align: center;
font-size: 50px;
padding-bottom:1px;
margin-top:0%;
border-bottom: 6px solid black;
}
<ul>
<li>Artists</li>
<li>News</li>
<li><h1>HH</h1></li>
<li>About</li>
<li>Contact</li>
</ul>
I would not use h1 at all. Use
<li id=hs>HH </li>
In css use
#hs
Font-size:16;
Or something that fits your need. Sorry for layout I am writing on phone.
One thing is that you're putting your <h1>HH</h1> in there illegally. You've got your <ul>, so you need to make your header a list element by doing <li><h1>HH</h1></li>.
You can delete your margin-left: 44%; from your h1 in your css now. That should clean it up a bit.
I'd like to create a navigation menu like this:
|main-item1|
|main-item2| |sub-item1| |sub-item2| |sub-item3|
|main-item3|
|main-item4|
what I see now is this:
|main-item1|
|main-item2|
|sub-item1| |sub-item2| |sub-item3| |main-item3| |main-item4|
I've found another question like this here on stackoverflow, but I couldn't manage to adapt the code.
The html code I have is this:
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li>Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
And this is the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative
}
It would be ok to use some jquery plugin, also because I'd like to add some effect on hovering, but I thought it was better to align everything with css first.
Thanks
try this:
#mainmenu>li {
height: 40px;
margin: 5px;
position: relative;
clear:both
}
and float to links:
#mainmenu a {
float:left;
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
overflow: hidden;
}
this is what you may want:
the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative;
}
#mainmenu .submenu li{
margin:0px;
}
and the html
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li style="clear:both;">Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
In html I added at "servizi" float left and in css i added :
#mainmenu .submenu li{
margin:0px;
}
So they are now at the same level.