I am a beginner in CSS and I would like to create a Menu with SubItems.
I have found a model on the internet and I would like to customize it but it doesn't work.
In the text you can find the XHTML and CSS File with just the Menu.
The Menu is shown correct but I want that the subMenus like 'Team' is shown with the corresponding Item.
I have searched on the internet and customized the " #menu ul li:hover > ul { " several times but I can't see the error. I think the error must be in that function because I want to appear the menu when I move the mouse over the Menu.
Could you please tell me where the error is?
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
p, ul, li, div, nav
{
padding:0; margin:0;
}
body {
font-family:Calibri;
}
#menu
{
position: absolute; overflow: auto; z-index:2;
}
.parent-menu {
background-color: white;
color:black;
min-width:200px;
float:left;
}
#menu ul
{
list-style-type:none;
}
#menu ul li a {
padding:10px 15px;
display:block;
color:black;
text-decoration:none; }
#menu ul li a:hover {
background-color:blue;
}
#menu ul li:hover > ul {
left: 200px; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in;
}
#menu ul li > ul {
position: absolute; background-color: #333; top: 0; left: -200px; min-width: 200px; z-index: -1; height: 100%; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in; }
#menu ul li > ul li a:hover {
background-color:#2e2e2e;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width"/>
<title>CSS Site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header class="header">
<h1>CSS Site</h1>
</header>
<nav id="menu">
<ul class="parent-menu">
<li>Home</li>
<li>
About
<ul>
<li> Team</li>
<li> Philosophie</li>
<li> Partner</li>
</ul>
</li>
<li>References</li>
<li>
Contact
<ul>
<li>Way</li>
<li>Rooms</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
You have your ul being child of li if you want it to stay like this you would need to do next manipulations.
http://plnkr.co/edit/JaVAaMunLFnT3TPGNQnY?p=preview
/* Styles go here */
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
p, ul, li, div, nav
{
padding:0; margin:0;
}
body {
font-family:Calibri;
}
#menu
{
position: absolute; overflow: auto; z-index:2;
}
.parent-menu {
background-color: white;
color:black;
min-width:400px;
float:left;
}
#menu ul
{
list-style-type:none;
}
#menu li {
width:200px;
}
#menu ul li a {
padding:10px 15px;
display:block;
color:black;
text-decoration:none; }
#menu ul li a:hover {
background-color:blue;
}
#menu ul li:hover > ul {
top: 0px;
-webkit-transition: top 200ms ease-in;
-moz-transition: top 200ms ease-in;
-ms-transition: top 200ms ease-in;
transition: top 200ms ease-in;
}
#menu ul li > ul {
position: absolute;
background-color: #333;
top: -200px;
left: 200px;
min-width: 200px;
z-index: 0;
height: 100%;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#menu ul li > ul li a:hover {
background-color:#2e2e2e;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header class="header">
<h1>CSS Site</h1>
</header>
<nav id="menu">
<ul class="parent-menu">
<li>Home</li>
<li>
About
<ul>
<li> Team</li>
<li> Philosophie</li>
<li> Partner</li>
</ul>
</li>
<li>References</li>
<li>
Contact
<ul>
<li>Way</li>
<li>Rooms</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
I changed animation from left to top, because it was causing problems with z-indexes, if it's necessary to be left, let me know and I'll try to help you out
You were missing too many things.
your HTML
<header class="header">
<h1>CSS Site</h1>
</header>
<nav id="menu">
<ul class="parent-menu">
<li>Home</li>
<li>
About
<ul>
<li> Team</li>
<li> Philosophie</li>
<li> Partner</li>
</ul>
</li>
<li>References</li>
<li>
Contact
<ul>
<li>Way</li>
<li>Rooms</li>
</ul>
</li>
</ul>
</nav>
CSS code that I've created
ul {
list-style: none;
}
li {
background-color: #fff;
cursor: pointer;
padding: 10px 15px;
max-width: 300px;
}
a {
color: black;
text-decoration: none;
}
.parent-menu li:hover a,
.parent-menu li ul li:hover {
color: blue;
}
.parent-menu li ul {
display: none;
}
.parent-menu li:hover ul {
display: block;
position: absolute;
left: 290px;
top: 0px;
}
.parent-menu li {
position: relative;
}
In it I've created a basic code which is you required to do so.
Try to understand code yourself and if you stuck somewhere then post your comment here.
Related
So I'm trying to make a transition/animation appear when you hover over a link. It should be a border-top black and go from left to right as it was a progress bar, so far I can only make it appear from top to bottom. Any idea?
nav{
height: 10vh;
background-color: cyan;
text-align: right;
}
header nav ul li{
display: inline-block;
padding: 2%;
transition: all 1s;
}
header nav ul li:hover{
border-top:5px solid black;
}
header nav ul li a{
text-decoration: none;
color: black;
font-weight: bold;
text-transform: uppercase;
}
https://jsfiddle.net/de36a287/
As this is purely a visual clue you could put the black bar in via a pseudo element.
This snippet adds an after pseudo element to the list item on hover and uses CSS animation to get it to grow to the full width with just a top border.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<style>
nav {
height: 10vh;
background-color: cyan;
text-align: right;
}
header nav ul li {
display: inline-block;
padding: 2%;
transition: all 1s;
position: relative;
}
header nav ul li:hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
z-index: 1;
border-top: 5px solid black;
animation: grow 1s linear;
animation-fill-mode: forwards;
}
#keyframes grow {
100% {
width: 100%;
}
}
header nav ul li a {
text-decoration: none;
color: black;
font-weight: bold;
text-transform: uppercase;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
</header>
</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;
}
Hi I have created boxes with overflow: hidden, now on hover I would like for the box to drop down showing inner box.
I have created this and it works fine however I would like to use a transition on this effect to smoothen the drop down. I have added the transition and it is not working.
Any advice would be great on this thank you.
<html>
<head>
<title></title>
<style type="text/css">
#items {width:300px;}
.item {width:100px;border:solid 1px #ccc;float:left;height:20px;
z-index:0;overflow:hidden;position:relative;}
.item:hover{overflow:visible;z-index:100;}
.item:hover .inner{z-index: 100;}
.inner{position: absolute;
background: white;
width: 100%;
}
</style>
</head>
<body>
<div id="items">
<div class="item"><div class="inner">text 1<br>text 1<br>text 1</div></div>
<div class="item"><div class="inner">text 2<br>text 2<br>text 2</div></div>
<div class="item"><div class="inner">text 3<br>text 3<br>text 3</div></div>
<div class="item"><div class="inner">text 4<br>text 4<br>text 4</div></div>
<div class="item"><div class="inner">text 5<br>text 5<br>text 5</div></div>
<div class="item"><div class="inner">text 6<br>text 6<br>text 6</div></div>
<div class="item"><div class="inner">text 7<br>text 7<br>text 7</div></div>
<div class="item"><div class="inner">text 8<br>text 8<br>text 8</div></div>
<div class="item"><div class="inner">text 9<br>text 9<br>text 9</div></div>
<div class="item"><div class="inner">text 10<br>text 10<br>text 10</div></div>
</div>
</body>
</html>
You can build the menu you want with just CSS, but you'll need a better html structure. I don't want to rebuild the wheel, so I got one (a very simple one) that is already done:
http://cssdeck.com/labs/pure-css3-smooth-drop-down-menu
HTML
<nav>
<ul class="cf">
<li>Menu Item 1</li>
<li><a class="dropdown" href="#">Menu Item 2</a>
<ul>
<li>Sub-menu Item 1</li>
<li>Sub-menu Item 2</li>
<li>Sub-menu Item 3</li>
</ul>
</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
</nav>
CSS
nav ul {
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 #FFF;
background: #ddd;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 25%;
}
nav a {
background: #ddd;
color: #444;
display: block;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav .dropdown:after {
content: ' ▶';
}
nav .dropdown:hover:after{
content:'\25bc'
}
nav li:hover a {
background: #ccc;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
background: #bbb;
}
/* Clearfix */
.cf:after, .cf:before {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
Try using jQuery Animations to that:
Your div for id=items should be.
<div id=items onmouseover=effects() onmouseout=normal()>
</div>
And your javascript should be:
<script>
function effects()
{
$(".inner").show();
}
function normal()
{
$(".inner").hide();
}
</script>
I downloaded a template for my company. I managed to get most things done, but I want to make a drop down menu and I just can't handle it. I tried this explanation How to add drop down menu using CSS? because I don't know JavaScript or jQuery, but it doesn't seem to work on this particular template. Am I describing the wrong class in css?
HTML
</nav>
</section>
<header class="sixteen columns alpha omega">
<nav class="main-nav sixteen columns">
<ul class="ten columns alpha">
<li>Start</li>
<li>O Kancelarii</li>
<li>Zakres Usług</li>
<ul>
<li>Something You do</li>
<li>TODO</li>
</ul>
<li>Press Room</li>
<li>Kontakt</li>
</ul>
<div class="social six columns omega">
</div> <!--Close Social Div-->
</nav>
CSS
.main-nav {
margin-top: 10px;
padding-top: 3px;
padding-bottom: 3px;
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
}
.main-nav li {
display: inline;
margin-right: 15px;
}
.social a:link {
float: right;
background-image: url(../img/facebook.png);
width: 30px;
height: 30px;
background-position: 0 -30px;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
margin-left: 2px;
}
.social a:last-child {
float: right;
background-image: url(../img/twitter.png);
width: 30px;
height: 30px;
background-position: 0 -30px;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
}
.social a:hover {
background-position: 0 0;
}
.main-nav li {
position: relative;
}
.main-nav ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display: none; /* hide it */
}
.main-nav li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Here is the whole css http://jsfiddle.net/9LcfX/18/
I've tried to rename the description in css from main_nav to alpha etc. but nothing.
Please help me, in advance thanks for Your time.
some structure problem in ur html code just replace html code with below code
<nav class="main-nav sixteen columns">
<ul class="ten columns alpha">
<li>Start</li>
<li>O Kancelarii</li>
<li>Zakres Usług
<ul>
<li>Something You do </li>
<li>TODO </li>
</ul>
</li>
<li>Press Room</li>
<li>Kontakt</li>
</ul>
<div class="social six columns omega"> </div>
</nav>
I have a little problem with floating.
I need to display my links side by side with 20px margin, but it does not work.
CSS
ul li{
float:left;
display: inline-block;
position:relative;
padding:0 20px;
}
.link {
font-family: Tahoma;
font-size:18px;
overflow: hidden;
padding: 2px 0;
position: absolute;
cursor:pointer;
}
.link a{
text-decoration:none;
color:gray;
-webkit-transition: color 0.4s ease;
}
.link span {
position: inherit;
left:-100%;
bottom: 1px;
height: 1px;
width:100%;
background: #fb6f5e;
-webkit-transition:all 0.4s;
}
.link a:hover{
color:#fb6f5e;
}
.link:hover span {
overflow:hidden;
position: inherit;
bottom: 1px;
left:100%;
height: 1px;
width:100%;
background: #fb6f5ee;
-webkit-transition:all 0.4s;
}
HTML
<ul>
<li><div class="link">Start<span></span></div></li>
<li><div class="link">About<span></span></div></li>
<li><div class="link">Other<span></span></div></li>
<li><div class="link">Contact<span></span></div></li>
</ul>
http://jsfiddle.net/SD58Z/727/
This should do the trick:
Demo
Your link was set to position absolute so it was outside the flow of elements. Meaning all elements ended on top of each other.
You were also having some unclosed div tags and other html errors.
I moved some things around in the html to make it work. I do think this can be optimized. The reason why the underline hover effect did not work was because of my changes in the html structure (which I think is what you intended in the first place).
css
ul{
padding-left:0px;
}
ul li{
float:left;
display: block;
margin-left:20px;
position:relative;
color:inherit;
}
ul li:first-child{
margin-left:0px;
}
.link {
font-family: Tahoma;
font-size:18px;
overflow:hidden;
cursor:pointer;
}
.link a{
text-decoration:none;
color:gray;
-webkit-transition: color 0.4s ease;
position:relative;
overflow:hidden;
}
.link a:hover{
color:#fb6f5e;
}
.link span {
position: absolute;
left:-100%;
bottom: 1px;
height: 1px;
width:100%;
background: #fb6f5e;
-webkit-transition:all 0.4s;
}
.link:hover span {
bottom: 1px;
left:0%;
height: 1px;
width:100%;
background: #fb6f5ee;
-webkit-transition:all 0.4s;
}
Html:
<ul>
<li>
<div class="link">
<a href="#">Start
<span></span>
</a>
</div>
</li>
<li>
<div class="link">
<a href="#">About
<span></span>
</a>
</div>
</li>
<li>
<div class="link">
<a href="#">Other
<span></span>
</a>
</div>
</li>
<li>
<div class="link">
<a href="#">Contact
<span></span>
</a>
</div>
</li>
</ul>
You have a ton of syntax issues
extra </div> tags
Improper tag order: <a><div></a></div> should be <a><div></div></a>
Incorrect Hex code for background color on <span> in CSS
You are trying to float items and also absolute position them. Pick one or the other.
Using this CSS (i deleted 2 lines of code) it works fine.
JSFIDDLE: http://jsfiddle.net/SD58Z/725/
ul li{
float:left;
display: inline-block;
padding:0 20px;
}
.link {
font-family: Tahoma;
font-size:18px;
overflow: hidden;
padding: 2px 0;
cursor:pointer;
}
.link a{
text-decoration:none;
color:gray;
-webkit-transition: color 0.4s ease;
}
.link span {
position: inherit;
left:-100%;
bottom: 1px;
height: 1px;
width:100%;
background: #fb6f5e;
-webkit-transition:all 0.4s;
}
.link a:hover{
color:#fb6f5e;
}
.link:hover span {
overflow:hidden;
position: inherit;
bottom: 1px;
left:100%;
height: 1px;
width:100%;
background: #fb6f5ee;
-webkit-transition:all 0.4s;
}
With your HTML fixed: http://jsfiddle.net/SD58Z/732/
I just played with your code for a minute and fixed the HTML. There seems to be some useless CSS but this gets you going.
HTML
<ul class="nav">
<li><div class="link">Start<span></span></div></li>
<li><div class="link">About<span></span></div></li>
<li><div class="link">Other<span></span></div></li>
<li><div class="link">Contact<span></span></div></li>
</ul>
CSS
#nav {
width: 100%;
display: block;
}
ul li{
float:left;
display: inline-block;
padding:0 20px;
}
.link {
font-family: Tahoma;
font-size:18px;
overflow: hidden;
padding: 2px 0;
cursor:pointer;
}
.link a{
text-decoration:none;
color:gray;
-webkit-transition: color 0.4s ease;
}
.link span {
position: inherit;
left:-100%;
bottom: 1px;
height: 1px;
width:100%;
background: #fb6f5e;
-webkit-transition:all 0.4s;
}
.link a:hover{
color:#fb6f5e;
}
.link:hover span {
overflow:hidden;
position: inherit;
bottom: 1px;
left:100%;
height: 1px;
width:100%;
background: #fb6f5ee;
-webkit-transition:all 0.4s;
}