I would like to create a 2-level navigation with delay effect when hovering.
in css Where to put transition?
here is the snippet code:
#import url('https://fonts.googleapis.com/css?family=Quicksand&subset=latin-ext');
body {
background: #ADAEAE;
box-sizing: border-box;
color: white;
font-family: 'Quicksand';
margin: 0;
}
nav {
background: #222122;
width: 100%;
text-align: center;
position: fixed;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul a {
display: inline-block;
height: 50px;
line-height: 50px;
padding: 0 10px;
color: white;
text-decoration: none;
}
nav ul a:hover {
background-color: #404040;
transition: all 1s;
}
nav ul ul li {
display: block;
}
nav li ul {
display: none;
position: absolute;
background: #222122;
}
nav li:hover ul {
display: block;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Dokument bez tytułu</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<nav>
<ul>
<li>About
<ul>
<li>About2</li>
<li>About3</li>
<li>About4</li>
</ul>
</li>
<li>Offer
<ul>
<li>Offer2</li>
<li>Offer3</li>
<li>Offer4</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
put z-index:1;background: #222122; on nav ul a{} to raise the link and hide the hidden menu below
in nav li ul{} remove display: none; and align the bottoms by bottom:0; and hide it under the a element with z-index:-1;
finally in nav li:hover ul{} have it move down with bottom:-300%; and add the animation here, you get a slide effect with transition: bottom .2s; and the ease-in makes it look like it hits something on the bottom
Note: bottom: -300% is because there are 3 items.
Note: transition is places under the :hover tag so that it disappears when you leave with your cursor, move it to nav li ul to make it slide back up
you can test in this snippet if that is indeed what you wanted.
#import url('https://fonts.googleapis.com/css?family=Quicksand&subset=latin-ext');
body {
background: #ADAEAE;
box-sizing: border-box;
color: white;
font-family: 'Quicksand';
margin: 0;
}
nav {
background: #222122;
width: 100%;
text-align: center;
position: fixed;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul a {
display: inline-block;
height: 50px;
line-height: 50px;
padding: 0 10px;
color: white;
text-decoration: none;
z-index:1;
background: #222122;
}
nav ul a:hover {
background-color: #404040;
transition: all 1s;
}
nav ul ul li {
display: block;
}
nav li ul {
bottom:0;
position: absolute;
background: #222122;
z-index:-1;
}
nav li:hover ul {
bottom: -300%;
display: block;
transition: bottom .2s ease-in;
}
<nav>
<ul>
<li>About
<ul>
<li>About2</li>
<li>About3</li>
<li>About4</li>
</ul>
</li>
<li>Offer
<ul>
<li>Offer2</li>
<li>Offer3</li>
<li>Offer4</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
Related
This is my css code (for the index page):
span{
display:block;
font-size:100px;
font-weight: lighter;
font-family: "Times New Roman", Times, serif;
}
.index {
background-image: url("images/indexbackground.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 1600px 800px;
}
/*NAVBAR (begin)*/
a {
text-decoration: none;
}
nav {
font-family: Arial;
background-color: Black;
}
ul {
background: black;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #white;
background: black;
display: block;
float: left;
padding: 27px;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: #DEB887;
cursor: pointer;
}
ul li ul {
background: black;
visibility: hidden;
opacity: 0;
min-width: 17rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 27px;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
/*NAVBAR (end)*/
This is the code for HTML (index page):
<!DOCTYPE html>
<link rel="stylesheet" href="piano.css" />
<html class="index">
<head>
<title>The piano - Home</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center><span>The Piano</span></center>
<!--(start) NAVBAR-->
<br><br><br><br><br><br>
<nav>
<div class="navwrapperindex">
<nav class="navmenuindex">
<ul class="clearfixindex">
<li>Home</li>
<li><a>The piano itself</a>
<ul class="sub-menu">
<li>Mechanics</li>
<li>Construction</li>
</ul>
<li><a>Types of pianos</a>
<ul class="sub-menu">
<li>Grand</li>
<li>Upright</li>
<li>Electric</li>
</ul>
</li>
<li>History of the piano
</li>
<li>Piano songs
</li>
</div>
</nav>
<!--(end)NAVBAR-->
</body>
</html>
I already tried a lot of things but nothing seems to work...
Right now my index page looks like this:
(Index page but I had to cut it because the full picture was over 2 mb)
(I'm sorry, It's really bad but it's my first time making a website with html and css).
I need to center the navigation bar and to be able to click the box instead of the word.
Thank you for reading (and maybe answering)!
First of all, I recommend to use classes instead of the direct element selector,
If you want to center the nav, you only need to set the property align-text: center in the parent divof the main nav. and if you want to click all the box instead only the text, the element that needs the padding and margin is the a not the li.
Check the snippet:
span{
display:block;
font-size:100px;
font-weight: lighter;
font-family: "Times New Roman", Times, serif;
}
.index {
background-image: url("images/indexbackground.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 1600px 800px;
}
.navwrapperindex {
text-align: center;
}
.navwrapperindex > nav{
display: inline-block;
}
a {
text-decoration: none;
}
nav {
font-family: Arial;
}
ul {
background: black;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #white;
background: black;
float: left;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
padding: 27px;
display: block;
}
li:hover {
background: #DEB887;
cursor: pointer;
}
ul li ul {
background: black;
visibility: hidden;
opacity: 0;
min-width: 17rem;
position: absolute;
transition: all 0.5s ease;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<center><span>The Piano</span></center>
<!--(start) NAVBAR-->
<br><br><br><br><br><br>
<nav>
<div class="navwrapperindex">
<nav class="navmenuindex">
<ul class="clearfixindex">
<li>Home</li>
<li><a>The piano itself</a>
<ul class="sub-menu">
<li>Mechanics</li>
<li>Construction</li>
</ul>
<li><a>Types of pianos</a>
<ul class="sub-menu">
<li>Grand</li>
<li>Upright</li>
<li>Electric</li>
</ul>
</li>
<li>History of the piano
</li>
<li>Piano songs
</li>
</ul>
</nav>
</div>
</nav>
I am currently having issue in the Drop-Down Navigation menu created using HTML and CSS but later when i tried to apply padding between the list of a UL elements, I found that padding is different in all the elements for ex. The student box has 1px gap on all the sides (if you zoom in a little bit you will see it) and the rest of the list has more or less padding than the student one.
I attached the snippet for both the CSS and HTML code below:
* {
margin: 0;
padding: 0;
}
body {
background: #34495e;
}
nav {
width: 100%;
height: 60px;
background-color: rgba(49, 45, 45, 0.8);
text-align: center;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: sans-serif;
color: #222;
font-size: 20px;
padding: 18px 14px;
text-decoration: none;
}
nav ul li ul {
display: block;
position: absolute;
background-color: rgba(49, 45, 45, 0.8);
padding: 1px;
}
nav ul li ul li a {
padding: 8px 32px;
}
nav ul li a:hover {
background-color: #2ecc71;
}
nav ul li ul li a:hover {
background-color: #2ecc71;
}
<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Registration
<ul>
<li>Student</li>
<li>Bus</li>
<li>Route</li>
<li>Driver</li>
</ul>
</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</body>
</html>
Help would be greatly appreciated.
Please add width: 100%; to dropdown menu li. Like:
* {
margin: 0;
padding: 0;
}
body {
background: #34495e;
}
nav {
width: 100%;
height: 60px;
background-color: rgba(49, 45, 45, 0.8);
text-align: center;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: sans-serif;
color: #222;
font-size: 20px;
padding: 18px 14px;
text-decoration: none;
}
nav ul li ul {
display: block;
position: absolute;
background-color: rgba(49, 45, 45, 0.8);
padding: 1px;
}
nav ul li ul li {
width: 100%;
}
nav ul li ul li a {
padding: 8px 32px;
}
nav ul li a:hover {
background-color: #2ecc71;
}
nav ul li ul li a:hover {
background-color: #2ecc71;
}
<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Registration
<ul>
<li>Student</li>
<li>Bus</li>
<li>Route</li>
<li>Driver</li>
</ul>
</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</body>
</html>
remove padding from nav ul li ul and add width:100% for nav ul li ul li.
* {
margin: 0;
padding: 0;
}
body {
background: #34495e;
}
nav {
width: 100%;
height: 60px;
background-color: rgba(49, 45, 45, 0.8);
text-align: center;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: sans-serif;
color: #222;
font-size: 20px;
padding: 18px 14px;
text-decoration: none;
}
nav ul li ul {
display: block;
position: absolute;
background-color: rgba(49, 45, 45, 0.8);
}
nav ul li ul li {
width:100%;
}
nav ul li ul li a {
padding: 8px 32px;
}
nav ul li a:hover {
background-color: #2ecc71;
}
nav ul li ul li a:hover {
background-color: #2ecc71;
}
<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Registration
<ul>
<li>Student</li>
<li>Bus</li>
<li>Route</li>
<li>Driver</li>
</ul>
</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</body>
</html>
I am new to HTML and CSS.
I am trying to make a navigation bar with a drop down menu.
I created navbar. But the width of the main menu item is changing with the sub menu Item.
How can I stop changing the width of the main Menu Item.
here main menu item is "SCHOOLING".
I don't want to change the width of SCHOOLING.
Before change
After change
html code for NavBar
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<link rel="stylesheet" type="text/css" href="nav.css">
</head>
<body>
<nav id="navbar" class="bold">
<ul>
<li style="border-top-left-radius:10px;border-bottom-left-radius:10px;">HOME</li>
<li><a href="subject.html" >SCHOOLING</a>
<ul>
<li>HIGH SCHOOL</li>
<li>HIGHER SECONDARY</li>
</ul>
</li>
<li>ENGINEERING</li>
<li>UG | PG</li>
<li>SPECIAL CLASSES</li>
<li>ABOUT</li>
<li style="border-right:none;">CONTACT US</li>
</ul>
</nav>
</body>
</html>
CSS code For the NavBar
* {
margin: 0;
padding: 0;
font-family: Courier New, monospace;
}
.fleft {
float: left;
}
.fright {
float: right;
}
.clear {
clear: both;
}
.bold {
font-weight: bold;
}
/* NAV BAR */
#navbar {
background-color: #333;
margin:10px;
height: 40px;
color: white;
border-radius: 10px;
}
#navbar ul {
list-style: none;
overflow: hidden;
}
#navbar ul li {
float: left;
border-right: 2px solid #dede0e;
font-size: 1.5em;
}
#navbar ul li a {
color: white;
display: block;
text-decoration: none;
padding: 6px 10px;
}
#navbar ul li:hover {
background-color: #000000;
}
/* DROP DOWN MENU */
#navbar ul ul {
display: none;
list-style: none;
color: blueviolet;
background: #a80000;
}
#navbar ul ul li {
float: none;
font-size: 1em;
border: none;
position: relative;
top: 100%;
left: 0;
}
#navbar ul ul li a {
border-right: none;
padding: 0 20px;
}
#navbar ul li:hover > ul
{
display: block;
}
You can achieve this by setting the position of the dropdown menu to absolute.
#navbar ul ul {
display: none;
list-style: none;
color: blueviolet;
background: #a80000;
position: absolute;
}
Any suggestions for this one?
I've added a background image of an arrow for any list item that has a drop down with the class of 'dropable' now because of this the list items are no longer evenly spaced to account for the added arrow, any suggestion on how to solve this as had no success so far.
CodePen: http://codepen.io/nickelse/pen/GJezQX?editors=110
HTML:
<div class="wrapper">
<div class="container">
<nav>
<ul class="clearfix">
<li>Home</li>
<li class="dropable">WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li class="dropable">Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials</li>
</ul>
</li>
<li>Graphic Design</li>
<li>Inspiration</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</div>
</div>
CSS:
/* CSS Document */
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #212121;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
.wrapper {
background: #454545;
border-bottom: 3px solid #666;
width: 100%;
}
.container {
margin: 0 auto;
width: 1000px;
}
nav {
margin: 0;
font-size: 0;
text-align: center;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
}
nav a {
display: block;
padding: 0 20px;
color: #fff;
font-size: 14px;
line-height: 56px;
text-decoration: none;
}
nav a:hover {
background-color: #000000;
}
nav > ul > li {
background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%;
}
nav > ul > li:first-child {
background: none;
}
nav li:hover + li {
background-image: none;
}
nav > ul > li:hover > a {
background-color: #666;
}
nav ul li:hover > ul {
display: block;
text-align: left;
}
nav ul ul {
display: none;
position: absolute;
top: 56px;
background-color: #666;
}
nav ul ul li {
border-top: 1px solid #454545;
width: 270px;
float: none;
display: list-item;
position: relative;
}
nav ul ul li:first-child {
border-top: none;
}
nav ul ul li a {
line-height: 42px;
}
nav li.dropable a {
background: url(http://i.imgur.com/5Clqhz5.png) no-repeat 93% center;
}
nav li.dropable li a {
background-image: none;
}
nav li.dropable li a:hover {
background: #333;
}
/*
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
*/
Cheers
Nick
Instead of using images for caret, I would suggest using fonts from font-awesome.
This works pretty good
/* CSS Document */
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #212121;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
.wrapper {
background: #454545;
border-bottom: 3px solid #666;
width: 100%;
}
.container {
margin: 0 auto;
width: 1000px;
}
nav {
margin: 0;
font-size: 0;
text-align: center;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
}
nav a {
display: block;
padding: 0 20px;
color: #fff;
font-size: 14px;
line-height: 56px;
text-decoration: none;
}
nav a:hover {
background-color: #000000;
}
nav > ul > li {
background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%;
}
nav > ul > li:first-child {
background: none;
}
nav li:hover + li {
background-image: none;
}
nav > ul > li:hover > a {
background-color: #666;
}
nav ul li:hover > ul {
display: block;
text-align: left;
}
nav ul ul {
display: none;
position: absolute;
top: 56px;
background-color: #666;
}
nav ul ul li {
border-top: 1px solid #454545;
width: 270px;
float: none;
display: list-item;
position: relative;
}
nav ul ul li:first-child {
border-top: none;
}
nav ul ul li a {
line-height: 42px;
}
nav ul > li.dropable > a:after {
/* display:inline;
content: "\00a0\00a0\00a0\00a0";*/
/* background:url(http://i.imgur.com/5Clqhz5.png) no-repeat center center;*/
}
nav li.dropable li a {
background-image: none;
}
nav li.dropable li a:hover {
background: #333;
}
/*
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="wrapper">
<div class="container">
<nav>
<ul class="clearfix">
<li>Home</li>
<li class="dropable">WordPress <i class="fa fa-caret-down"></i>
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li class="dropable">Web Design <i class="fa fa-caret-down"></i>
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials</li>
</ul>
</li>
<li>Graphic Design</li>
<li>Inspiration</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</div>
</div>
I would take advantage of the :after pseudo class in CSS. The margins become evenly spaced and you forgo having to put the image into the navigation unnecessarily.
CodePen
nav ul > li.dropable > a:after {
display:inline;
content: "\00a0\00a0\00a0\00a0";
background:url(http://i.imgur.com/5Clqhz5.png) no-repeat center center;
}
Figured it out, cheers anyway.
I did this:
nav li.dropable a {
background: url(http://i.imgur.com/5Clqhz5.png) no-repeat right 20px center ;
padding-right: 34px;
}
I have a basic horizontal nav menu, where a drop down list shows on hover. When the drop down links are single words everything works fine, but if the links are more than one word, ie "Lori Ipsum", the line breaks. I'm looking for the lines to keep their full width, so "Lori Ipsum" would be shown on the same line.
How can I prevent the line break?
Recreated in a code pen: http://codepen.io/agconti/pen/zvjkm
html:
<nav role='navigation'>
<ul>
<li>Home</li>
<li>
About
<ul>
<li>Lorem ipsum</li>
<li>Aliquam tincidunt</li>
<li>Vestibulum auctor</li>
</ul>
</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
css:
html {
font-size: 1.5em;
}
a {
color: white;
text-decoration: none;
width: 100%;
}
li {
transition: color 0.15s ease-out, background-color 0.1s ease-in;
}
ul {
list-style: none;
background: blue;
margin: 0;
}
ul li {
padding: 1em;
margin: 0;
display: inline-block;
position: relative;
}
ul li:hover {
background: pink;
}
ul li:hover > ul {
display: block;
}
ul ul {
background-color: pink;
position: absolute;
display: none;
padding: 0;
left: 0;
top: 100%;
}
ul ul li {
box-sizing: border-box;
display: block;
minwidth: 100%;
}
ul ul li:hover {
background: #ffa6b6;
color: white;
}
set li default width;
or use
li a {
white-space: nowrap;
}
Maybe I am missing something, but you have a pretty good solution as is, and you could
fix the text wrap problem by specifying a width to the nest ul as follows:
ul ul {
background-color: tan;
position: absolute;
display: none;
padding: 0;
left: 0;
top: 100%;
width: 300px;
}
I used 300px but you can pick a suitable value.
html {
font-size: 1.5em;
}
a {
color: white;
text-decoration: none;
}
li {
transition: color 0.15s ease-out, background-color 0.1s ease-in;
}
ul {
list-style: none;
background: blue;
margin: 0;
}
ul li {
padding: 1em;
margin: 0;
display: inline-block;
position: relative;
}
ul li:hover {
background: pink;
}
ul li:hover > ul {
display: block;
}
ul ul {
background-color: tan;
position: absolute;
display: none;
padding: 0;
left: 0;
top: 100%;
width: 300px;
}
ul ul li {
/* white-space: nowrap;*/
box-sizing: border-box;
display: block;
min-width: 100%;
}
ul ul li:hover {
background: #ffa6b6;
color: white;
}
ul ul li a {
width: 200%;
}
<nav role='navigation'>
<ul>
<li>Home</li>
<li>
About
<ul>
<li>Lorem ipsum</li>
<li>Aliquam tincidunt</li>
<li>Vestibulum auctor</li>
</ul>
</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
<section class="hero">
<div class="mask"></div>
</section>
li a {
white-space: nowrap;
}