I want to get my nav bar to stick at the top when scrolling on the web page.
I have tried searching on here for a solution but am struggling as it is causing more errors.
When using position:fixed, I find that it causes issues with the original postion which I want to be below my banner logo.
My code for HTML and CSS is below.
Thank you
/* ******************* */
/* Navigiation */
/* ******************* */
#sitenav a {
text-decoration: none;
color: white;
padding: inherit;
}
#sitenav ul {
background: black;
padding: 15px;
}
#sitenav ul li {
padding: 15px;
background: black;
display: block;
text-align: center;
font-family: 'Montserrat', sans-serif;
display: inline;
}
#sitenav ul li:hover {
background: rgb(43, 78, 89);
color:white;
cursor:pointer;
}
<header class="clearfix">
<div id="banner" class="middlecontent">
<img src="images/logobanner.png">
</div>
<nav>
<div id="sitenav">
<ul >
<li>Home</li>
<li>Events</li>
<li>Curriculum</li>
<li>About</li>
<li>Student</li>
<li>Staff</li>
</ul>
</div>
</nav>
</header>
If you don't need to support older browsers, you can use position: sticky
https://developer.mozilla.org/pl/docs/Web/CSS/position#Sticky_positioning
Please try this I have added some code.
JQuery:
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= ($("header").height())) {
$("#sitenav").addClass("fix-header");
} else {
$("#sitenav").removeClass("fix-header");
}
});
Css:
body{
margin:0;
}
section{
background:#ccc;
height:800px;
}
#sitenav.fix-header {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
margin:0;
}
#sitenav.fix-header ul{
margin:0;
}
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= ($("header").height())) {
$("#sitenav").addClass("fix-header");
} else {
$("#sitenav").removeClass("fix-header");
}
});
/* ******************* */
/* Navigiation */
/* ******************* */
#sitenav a {
text-decoration: none;
color: white;
padding: inherit;
}
#sitenav ul {
background: black;
padding: 15px;
}
#sitenav ul li {
padding: 15px;
background: black;
display: block;
text-align: center;
font-family: 'Montserrat', sans-serif;
display: inline;
}
#sitenav ul li:hover {
background: rgb(43, 78, 89);
color:white;
cursor:pointer;
}
body{
margin:0;
}
section{
background:#ccc;
height:1000px;
}
#sitenav.fix-header {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
margin:0;
}
#sitenav.fix-header ul{
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="clearfix">
<div id="banner" class="middlecontent">
<img src="images/logobanner.png">
</div>
<nav>
<div id="sitenav">
<ul>
<li>Home</li>
<li>Events</li>
<li>Curriculum</li>
<li>About</li>
<li>Student</li>
<li>Staff</li>
</ul>
</div>
</nav>
</header>
<!--this for demo for checking scroll-->
<section>
</section>
You should try this code.
$(window).ready(function() {
var header = $('nav').innerHeight();
var window_scroll = $(window).scrollTop();
if (window_scroll >= header) $("nav").addClass("sticky");
else $("header").removeClass("nav");
})
$(window).on("scroll", function() {
var header = $('nav').innerHeight();
var scroll = $(window).scrollTop();
if (scroll >= header) $("nav").addClass("sticky");
else $("nav").removeClass("sticky");
});
nav{
position:absolute;
width:100%;
height:50px;
top:0;
left:0;
}
nav.sticky{
position:fixed;
width:100%;
z-index:99;
top:0;
left:0;
}
#sitenav a {
text-decoration: none;
color: white;
padding: inherit;
}
#sitenav ul {
background: black;
padding: 15px;
}
#sitenav ul li {
padding: 15px;
background: black;
display: block;
text-align: center;
font-family: 'Montserrat', sans-serif;
display: inline;
}
#sitenav ul li:hover {
background: rgb(43, 78, 89);
color:white;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header class="clearfix">
<div id="banner" class="middlecontent">
<img src="images/logobanner.png">
</div>
<nav>
<div id="sitenav">
<ul >
<li>Home</li>
<li>Events</li>
<li>Curriculum</li>
<li>About</li>
<li>Student</li>
<li>Staff</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Related
I've just started out with the basics of CSS and HTML, there's this problem that I am facing, In my Navbar , when I click on the Hamburger button , The properties that I had added to my text get reverted back to the default one , like the text-decoration changes to underline , How Do I Fix this?
HTML code
<html lang="en">
<head>
<title>My CSS Website</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<nav>
<ul class="top-nav" id="dropdownMenu">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="right-nav">Sign Up</li>
<li class="right-nav">Sign in</li>
<li class="dropdownIcon"><a href="javascript:void(0)" onclick="Hamburger()">☰</li>
</ul>
</nav>
<script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
if(x.className==="top-nav"){
x.className+="responsive";
}
else{
x.className="top-nav";
}
}
</script>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
nav,header,footer{
display: block;
}
body{
line-height: 1.5;
}
/* Navbar */
nav{
width:100%;
}
nav ul{
background-color: #eee;
overflow:hidden;
}
ul.top-nav li{
list-style:none;
float: left;
}
ul.top-nav li.right-nav{
min-height: 16px;
float: right;
}
ul.top-nav li a{
text-decoration: none;
padding: 1.25rem;
min-height:16px;
text-align: center;
text-transform: uppercase;
color:rgb(54, 49, 49);
display:block;
}
ul.top-nav li a:hover{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li.dropdownIcon{
display: none;
}
/* Mobile Version */
#media screen and (max-width:680px){
ul.top-nav li:not(:nth-child(1)){
display:none;
}
ul.top-nav li.dropdownIcon{
display: block;
float:right;
}
ul.top-nav.responsive{
position:relative;
}
ul.top-nav.responsive li{
display: inline;
float:none;
}
ul.top-nav.responsive li a {
display:block;
text-align:left;
text-decoration: none;
}
} ```
Because you don't add class in the right way also change onclick, don't wrap function into the string "Hamburger()" use this Hamburger()
<li class="dropdownIcon"><a href="javascript:void(0)" onclick=Hamburger()>☰</li>
</ul>
*{
margin:0;
padding:0;
}
nav,header,footer{
display: block;
}
body{
line-height: 1.5;
}
/* Navbar */
nav{
width:100%;
}
nav ul{
background-color: #eee;
overflow:hidden;
}
ul.top-nav li{
list-style:none;
float: left;
}
ul.top-nav li.right-nav{
min-height: 16px;
float: right;
}
ul.top-nav li a{
text-decoration: none;
padding: 1.25rem;
min-height:16px;
text-align: center;
text-transform: uppercase;
color:rgb(54, 49, 49);
display:block;
}
ul.top-nav li a:hover{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li.dropdownIcon{
display: none;
}
/* Mobile Version */
#media screen and (max-width:680px){
ul.top-nav li:not(:nth-child(1)){
display:none;
}
ul.top-nav li.dropdownIcon{
display: block;
float:right;
}
ul.top-nav.responsive{
position:relative;
}
ul.top-nav.responsive li{
display: inline;
float:none;
}
ul.top-nav.responsive li a {
display:block;
text-align:left !important;
text-decoration: none !important;
}
}
<nav>
<ul class="top-nav" id="dropdownMenu">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="right-nav">Sign Up</li>
<li class="right-nav">Sign in</li>
<li class="dropdownIcon"><a href="javascript:void(0)" onclick={Hamburger()}>☰</li>
</ul>
</nav>
<script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
if(x.className==="top-nav"){
x.classList.add("responsive")
// x.className+=" "+"responsive";
}
else{
x.className="top-nav";
}
}
</script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
if(x.className==="top-nav"){
//add class like this
x.className+=" "+"responsive";
or
x.classList.add("responsive");
}
else{
x.className="top-nav";
}
}
JavaScript Class
if you want get class list then use classList and classList return list
const list = element.classList
if you want to add class then.
element.classList.add("class_name");
if you want to remove class then.
element.classList.remove("class_name");
if you want to toggle class then. (toggle check if class exist then remove class and else add class).
element.classList.toggle("class_name");
*{
margin:0;
padding:0;
}
nav,header,footer{
display: block;
}
body{
line-height: 1.5;
}
/* Navbar */
nav{
width:100%;
}
nav ul{
background-color: #eee;
overflow:hidden;
}
ul.top-nav li{
list-style:none;
float: left;
}
ul.top-nav li.right-nav{
min-height: 16px;
float: right;
}
ul.top-nav li a{
text-decoration: none;
padding: 1.25rem;
min-height:16px;
text-align: center;
text-transform: uppercase;
color:rgb(54, 49, 49);
display:block;
}
ul.top-nav li a:hover{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li a:active{
background-color: #0080ff;
color: #fff;
}
ul.top-nav li.dropdownIcon{
display: none;
}
/* Mobile Version */
#media screen and (max-width:680px){
ul.top-nav li:not(:nth-child(1)){
display:none;
}
ul.top-nav li.dropdownIcon{
display: block;
float:right;
}
ul.top-nav.responsive{
position:relative;
}
ul.top-nav.responsive li{
display: inline;
float:none;
}
ul.top-nav.responsive li a {
display:block;
text-align:left;
text-decoration: none;
}
}
<head>
<title>My CSS Website</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<nav>
<ul class="top-nav" id="dropdownMenu">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="right-nav">Sign Up</li>
<li class="right-nav">Sign in</li>
<li class="dropdownIcon"><a href="javascript:void(0)" onclick="Hamburger()">☰</li>
</ul>
</nav>
<script>
function Hamburger(){
var x=document.getElementById("dropdownMenu");
x.classList.toggle("responsive");
}
</script>
</body>
I think this code is help you! thank you!
I am currently using ASP.NET to create a web form using HTML5 and CSS to style it. The code that I am using on the site.master for the navigation bar is as follows.
<body>
<header>
<div class="container">
<img src="TGASlogo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home Page</li>
<li>About</li>
<li>Contact</li>
<li>List1</li>
<li>List2</li>
<li>List3</li>
<li>List4</li>
<li>List5</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>
<div>
</div>
</body>
and the style sheet is as follows.
body {
padding-left: 500px;
padding-right: 500px;
margin: 0;
background: #F0EFE8;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.container {
width:80%;
margin:0 auto;
}
header {
background: #FFD63C;
}
header::after {
content: '';
display:table;
clear:both;
}
.logo {
float:left;
padding:5px 0;
}
nav {
float:right;
}
nav ul {
margin:0;
padding:0;
list-style:none;
}
nav li {
display:inline-block;
margin-left:35px;
padding-top:35px;
position:relative;
}
nav a {
color:#444;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-weight:500;
}
nav a:hover {
color:#FFF;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #FFF;
position: absolute;
top: 0;
width: 0%;
transition:all ease-in-out 250ms;
}
nav a:hover::before{
width:100%;
}
I am unsure as to why my navigation bar has randomly been squished as shown in the screenshot provided. is there any way that I can make the navigation bar re-adjust in size as people change their browser window size?
This is a screenshot of how the nav bar looks
Hi there I have a horizontal menu with the logo in the center, can't seem to get it inline but still looks good in all browsers so far.
Now when in responsive mode I would like it to show the logo all the time at the top and the button to go underneath to show/hide the menu.
At the moment in responsive it hides the logo then when the Show Menu is clicked it shows the menu with the logo in the middle of the ul.
Here is the code so far a bit messy at the moment.
* {
margin: 0;
border: 0;
padding: 0;
}
body {
font-family: sans-serif;
margin: 5px;
background: #F1F6F8;
}
a {
font-weight: bold;
color: #3F5767;
text-decoration: none;
}
a:hover {
color: #524C56;
}
#wrapper {
max-width: 980px;
margin: 0 auto;
}
header {
width: 100%;
height: 100px;
top: 0;
left: 0;
}
/* Logo code can go here */
ul li a.logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:76px;
width:175px;
display:block;
padding:5px;
margin: 0 auto;
}
nav {
text-align: center;
}
li {
font-family: sans-serif;
font-size: 150%;
display: inline-block;
padding: 0 10px 0 10px;
}
nav ul li a {
color: #3F5767;
}
/* Start controls checkbox change button */
ul li a:hover + .hidden, .hidden:hover{ /* Maybe remove this */
display: block;
width: auto;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
.show-menu{
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
color: #3F5767;
background: #424242;
text-align: center;
padding: 3px o;
display: none;
}
.thing:before {
content: "Show Menu";
}
input[type=checkbox]:checked ~ .thing:before {
content: "Close Menu";
}
#media screen and (max-width: 760px) {
ul{position: static;
display: none;
}
li{
margin: 0 auto;
font-size: 100%;
padding: 0;
/*border-bottom: 2px solid #676767;*/
}
ul li, li a{
width: 100%;
font-size: 15px;
}
.show-menu{
display: block;
width: auto;
height: 30px;
padding: 3px 0 0 0;
}
}
/* End controls checkbox change button */
#media print {#ghostery-purple-box {display:none !important}}
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Coast Fm Tasmania</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<header>
<nav>
<input id="show-menu" role="button" type="checkbox">
<label for="show-menu" class="show-menu thing">   </label>
<ul id="menu">
<li>
Home</li>
<li>Events</li>
<li>On-Air</li>
<li>Gallery</li>
<li><a class="logo" href="index.html"></a></li>
<li>Sport</li>
<li>The Team</li>
<li>Sponsors</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
Also here is the Logo
Coast FM
Thanks
You can add another logo in a div that will be your "hidden logo".
<input id="show-menu" role="button" type="checkbox">
<div class="hidden">
<a class="hidden-logo" href="index.html"></a>
<label for="show-menu" class="show-menu thing">   </label>
</div>
Then you can display it and hide it whenever you wish.
.hidden {
display:flex;
justify-content: center;
background: #424242;
display:none;
}
#media screen and (max-width: 760px) {
.hidden {
display:flex;
}
}
.hidden-logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:23px;
background-size:50%;
width:175px;
display:block;
padding:5px;
}
Here is an example
https://jsfiddle.net/jrdkp7ph/2/
You can use jquery and add desired list dynamically
Do check code here for example: https://jsbin.com/zusunidupo/1/edit?css,js,output
Need to execute below code block every time when window resizes(in link provided executes on first load only)
if ($(window).width() < 760) {
$('<li><a class="logo" href="https://i.stack.imgur.com/1dcqW.png"><img border="0" src="https://i.stack.imgur.com/1dcqW.png" width="50" height="50"></a></li>').insertAfter($('li:eq(4)'))
}
else {
$("#menu").prepend('<li><a class="logo" href="https://i.stack.imgur.com/1dcqW.png"><img border="0" src="https://i.stack.imgur.com/1dcqW.png" width="50" height="50"></a></li>');
}
hey i think your html code many change just suggest improve
* {
margin: 0;
border: 0;
padding: 0;
}
body {
font-family: sans-serif;
margin: 5px;
background: #F1F6F8;
}
a {
font-weight: bold;
color: #3F5767;
text-decoration: none;
}
a:hover {
color: #524C56;
}
#wrapper {
max-width: 980px;
margin: 0 auto;
}
header {
width: 100%;
height: 100px;
top: 0;
left: 0;
}
/* Logo code can go here */
ul li a.logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:76px;
width:175px;
display:block;
padding:5px;
margin: 0 auto;
}
.logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:76px;
width:175px;
display:block;
padding:5px;
margin: 0 auto;
}
nav {
text-align: center;
}
li {
font-family: sans-serif;
font-size: 150%;
display: inline-block;
padding: 0 10px 0 10px;
}
nav ul li a {
color: #3F5767;
}
/* Start controls checkbox change button */
ul li a:hover + .hidden, .hidden:hover{ /* Maybe remove this */
display: block;
width: auto;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
.show-menu{
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
color: #3F5767;
background: #424242;
text-align: center;
padding: 3px o;
display: none;
}
.thing:before {
content: "Show Menu";
}
input[type=checkbox]:checked ~ .thing:before {
content: "Close Menu";
}
#media screen and (max-width: 760px) {
ul{position: static;
display: none;
}
ul li a.logo { display: none; }
li{
margin: 0 auto;
font-size: 100%;
padding: 0;
/*border-bottom: 2px solid #676767;*/
}
ul li, li a{
width: 100%;
font-size: 15px;
}
.show-menu{
display: block;
width: auto;
height: 30px;
padding: 3px 0 0 0;
}
}
/* End controls checkbox change button */
#media print {#ghostery-purple-box {display:none !important}}
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Coast Fm Tasmania</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<header>
<nav>
<input id="show-menu" role="button" type="checkbox">
<label for="show-menu" class="show-menu thing"> <a class="logo" href="index.html"></a>   </label>
<ul id="menu">
<li>
Home</li>
<li>Events</li>
<li>On-Air</li>
<li>Gallery</li>
<li><a class="logo" href="index.html"></a></li>
<li>Sport</li>
<li>The Team</li>
<li>Sponsors</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
I need some help. I am working on this navigation bra that has a list of menu in it, and one of them is Award. Award has submenu that is hidden, and if I hover it, it submenu should be visible to the user. However, when I hover over the Award, it submenu not being visible to the user. I don't what I am doing wrong. I was hopping that someone could help me here, Please.
Here is my code
function openNav() {
document.getElementById("nav_sidebar").style.width = "142px";
document.getElementById("main").style.height = "142px";
}
function closeNav() {
document.getElementById("nav_sidebar").style.width = "0";
document.getElementById("main").style.height= "0";
}
.sidebar {
width: 0;
list-style: none;
position: absolute;
height: 100%;
z-index: 0;
left: 2px;
background: #38424f;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}
.sidebar ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
.sidebar ul li:hover {
background:#f6f6f6
}
.sidebar ul {
display:none;
position: absolute;
left: 5%;
background: #fff;
padding:0
}
.sidebar ul li {
float:none;
width:200px
}
.sidebar li ul:hover
{
display: block;
}
.sidebar li a {
padding: 5px 8px 8px 15px;
text-decoration: none;
font-size: 22px;
color: #4ba6c1;
display: block;
transition: 0.3s
}
.sidebar a:hover, .offcanvas a:focus{
color: #ffffff;
}
.sidebar .close {
position: absolute;
top: 0;
right: 10px;
font-size: 20px;
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin</title>
<meta charset="utf-8">
<script src="../src//jquery/jquery.min.js"></script>
<link href="../css/Main.css" rel="stylesheet">
<script src="../javascript/Scritp.js"></script>
</head>
<body>
<div class ="side_nave">
<label class = "nav" onclick="openNav()">☰ Menu</label>
<div class="main_panel" id = "main">
<div class="sidebar" id = "nav_sidebar">
<li><a href="javascript:void(0)" class="close" onclick=
"closeNav()">×</a></li>
<li><a class ="active" href="#">Employee</a></li>
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Certificate</li>
<li>Update</li>
<li>Sent Email</li>
<li>Settings</li>
<li>Logout</li>
</div>
</div>
</div>
</body>
</html>
You're targeting .sidebar li ul:hover to show the hidden ul. That won't work because the ul you want to hover is hidden - you can't hover the element if it's hidden. Instead, you need to target .sidebar li:hover > ul which means that when you hover a li it will show any direct child ul's
function openNav() {
document.getElementById("nav_sidebar").style.width = "142px";
document.getElementById("main").style.height = "142px";
}
function closeNav() {
document.getElementById("nav_sidebar").style.width = "0";
document.getElementById("main").style.height= "0";
}
.sidebar {
width: 0;
list-style: none;
position: absolute;
height: 100%;
z-index: 0;
left: 2px;
background: #38424f;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}
.sidebar ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
.sidebar ul li:hover {
background:#f6f6f6
}
.sidebar ul {
display:none;
position: absolute;
left: 5%;
background: #fff;
padding:0
}
.sidebar ul li {
float:none;
width:200px
}
.sidebar li:hover > ul
{
display: block;
}
.sidebar li a {
padding: 5px 8px 8px 15px;
text-decoration: none;
font-size: 22px;
color: #4ba6c1;
display: block;
transition: 0.3s
}
.sidebar a:hover, .offcanvas a:focus{
color: #ffffff;
}
.sidebar .close {
position: absolute;
top: 0;
right: 10px;
font-size: 20px;
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin</title>
<meta charset="utf-8">
<script src="../src//jquery/jquery.min.js"></script>
<link href="../css/Main.css" rel="stylesheet">
<script src="../javascript/Scritp.js"></script>
</head>
<body>
<div class ="side_nave">
<label class = "nav" onclick="openNav()">☰ Menu</label>
<div class="main_panel" id = "main">
<div class="sidebar" id = "nav_sidebar">
<li><a href="javascript:void(0)" class="close" onclick=
"closeNav()">×</a></li>
<li><a class ="active" href="#">Employee</a></li>
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Certificate</li>
<li>Update</li>
<li>Sent Email</li>
<li>Settings</li>
<li>Logout</li>
</div>
</div>
</div>
</body>
</html>
You can even solve this without JavaScript:
<li>Awards
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
#awards ul{
display:none;
}
#awards:hover ul{
display:block;
}
I have an existing website with the menu code below and I want to add more stuff to my site but users need to nevigate to those pages please help me to add a sub menu to the code I have. Please help?
HTML
<div id="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>FAQ</li>
<li class="active">About</li>
<li>Contact Us</li>
</ul>
</div>
CSS
/** HEADER */
#header-wrapper
{
overflow: none;
height: 100px;
margin-bottom: 20px;
background: rgba(0,0,0,0.70);
}
#header {
overflow: none;
}
/** LOGO */
#logo {
float: left;
width: 10px;
height: 100px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
}
#logo h1 a {
padding-left: 1px;
text-decoration: none;
font-size: 1.50em;
font-weight: 600;
font-family: 'Archivo Narrow', sans-serif;
color: #FFFFFF
}
/** MENU */
#menu {
float: right;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
display: block;
height: 100px;
padding: 0px 30px;
line-height: 100px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: none;
background: rgba(0,0,0,0.70);
}
#menu .active
{
background: rgba(0,0,0,0.70);
}
Working menu:
a quick fiddle for you
//HTML
<div id="menu">
<ul>
<li>Home
</li>
<li>Services
<ul>
<li>Something You do
</li>
<li>TODO
</li>
</ul>
</li>
<li>FAQ
</li>
<li class="active">About
</li>
<li>Contact Us
</li>
</ul>
</div>
//CSS
/** MENU */
#menu {
position:relative;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
float:left;
line-height: 110px;
}
#menu li {
list-style:none;
}
#menu>ul>li {
float: left;
margin-right: 1px;
position:relative;
}
#menu>ul>li ul {
height:100%;
position:absolute;
bottom:-100%
}
#menu>ul>li ul>li {
bottom:0px;
display:none;
width:15em;
float:left;
}
#menu>ul>li:hover ul>li {
display:block
}
#menu a {
display:block;
padding: 0px 30px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
background:rgba(200, 200, 200, 0.5);
}
#menu a:hover {
text-decoration: none;
cursor:pointer;
background:rgba(200, 200, 200, 1);
}
#menu .active {
}
Better to use jQuery plugin like Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
//link to the CSS files for this menu type
<link rel="stylesheet" media="screen" href="superfish.css">
// link to the JavaScript files (hoverIntent is optional)
// if you use hoverIntent, use the updated r7 version (see FAQ)
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>
// initialise Superfish
<script>
jQuery(document).ready(function(){
jQuery('#menu ul').superfish();
});
</script>
Well, first add your submenu in the markup, for example:
<li>Services
<ul>
<li> sub menu item 1 </li>
<li> sub menu item 2 </li>
</ul>
</li>
....
Position your list items:
#menu li{
position: relative;
}
Style your sub menu:
#menu ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display: none; /* hide it */
}
#menu li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Try http://jsfiddle.net/9LcfX/