I have created a CSS Navigation Bar and its divided into three parts:
1.Left (.logo is class and it placed at the Left)
2.Center (.menu is another class and it placed at the Center)
3.Right (.menu2 is last class and i can't place at the Right correctly)
I want Something Like this and how can I achieve this task:
.logo {
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav{
position: fixed;
width: 100%;
background-color: #000;
}
/*Menu 1*/
nav .menu ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: center;
margin:0;
transition: 2s;
}
nav .menu ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
/*Menu 2*/
nav .menu2 ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin:0;
transition: 2s;
}
nav .menu2 ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu2 ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
<nav>
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li>Menu1</li>
<li>Menu1</li>
</ul>
</div>
<div class="menu2">
<ul>
<li>menu2</li>
<li>menu2</li>
</ul>
</div>
</nav><!----- nav ------>
You might put the menu2s before the Menu1s in the HTML, and give .menu2 right: 0; and position: absolute;:
nav{
position: fixed;
width: 100%;
background-color: #000;
}
.logo {
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
/*Menu 1*/
nav .menu ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: center;
margin:0;
transition: 2s;
}
nav .menu ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
/*Menu 2*/
nav .menu2 {
right: 0;
position: absolute;
}
nav .menu2 ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin:0;
transition: 2s;
}
nav .menu2 ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu2 ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
<nav>
<div class="logo">
LOGO
</div>
<div class="menu2">
<ul>
<li>menu2</li>
<li>menu2</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Menu1</li>
<li>Menu1</li>
</ul>
</div>
</nav><!----- nav ------>
Related
I'm having problems with my navbar. The process of making one is already done, but when I hover over my nav and my subnav appears, all the text below it moves down.
How do I fix this?
Here is a code snippet which demonstrates the problem, hover over TAKKEN to see the issue:
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Here is some text below the nav.
Image showing the problem
Try giving a fixed width to the li elements.
Check this:
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal > li {
float: left;
width: 6rem;
}
.horizontal li ul{
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a{
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color:#FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
}
.horizontal li a:hover {
background-color: darkorange;
color:#a2becf
}
.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
There appear to be 2 style-related problems with your nav.
Elements are being shifted to the side when you hover over TAKKEN.
This is happening because the text KAPOENEN and KAWELLEN is longer and therefore wider than TAKKEN. The quickest fix would be to define a specific width for each of the items in your nav.
Any text below the nav moves down as soon as one of the subnavs open.
To solve this problem, you need to give your nav an absolute position, and add a placeholder div to just above it in your HTML.
Run the code snippet below to see a demonstration of both points. I've marked all my changes in the CSS using comments.
/* New code */
#placeholder {
height: 100px;
}
nav {
position: absolute;
top: 5px;
}
/* End new code */
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
/* New code */
width: 80px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
<div id="placeholder"></div>
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Here is some text under the nav.
Hey i have my drop down menu here:
https://i.gyazo.com/642cdb023365cd8e7e086d53551fc385.png
I am having trouble getting the drop down text closer together i tried putting padding on content a {} but it doesn't seem to work
I included the html mark up as well along with the other styles I used for my nav bar.
nav {
padding-left: 5px
}
nav .main-nav {
height: 80px;
width: 100%;
margin-top: 64px;
background: url(../images/navHeader.png) no-repeat top;
position: relative
}
nav .main-nav ul {
width: 360px;
height: 80px;
margin-top: 2px;
padding: 0;
list-style-type: none
}
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 115px;
line-height: 80px;
height: 80px
}
nav .main-nav ul a {
text-align: center;
font-weight: 750;
font-size: 15px;
color: #84827d;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
nav .main-nav ul a:hover {
text-decoration: none;
color: #7289da
}
nav .main-nav li .dropdown {
}
nav .main-nav .dropdown-content {
position: absolute;
display: none;
float: left;
z-index: 10;
-webkit-box-shadow: 0 3px 5px 0 #999;
-moz-box-shadow: 0 3px 5px 0 #999;
box-shadow: 0 3px 5px 0 #999;
border: 1px solid #CCC;
background: #3A4FC5;
color: #656161;
opacity: .8;
min-width: 10%;
top: 60px;
}
nav .main-nav .dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
nav .main-nav .dropdown-content a:hover {
background-color: #3A4FC5
}
nav .main-nav .dropdown:hover .dropdown-content {
display: inline-block;
}
<nav>
<div class="main-nav">
<ul class="left">
<li class="dropdown">Home
<div class="dropdown-content">
Third
Third Link
Third Link 3
</div>
</li>
<li>Gods</li>
<li>Goddesses</li>
</ul>
<div class="play-now"></div>
<ul class="right">
<li>Heroes</li>
<li>Myths</li>
<li>Beasts</li>
</ul>
</div>
</nav>
This was problem with your code:
nav.main-nav ul a,
nav.main-nav ul li {
display: inline-block;
width: 115px;
line-height: 80px;
height: 80px;
}
You set line-height and height to be fixed size.
If you remove heightand set, for example, line-height: 2em; it should be much better.
nav.main-nav ul a,
nav.main-nav ul li {
display: inline-block;
width: 115px;
line-height: 2em;
}
Change height and line-height in tis rule:
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 115px;
line-height: 8px;
height: 80px
}
That will solve your problem - I changed it to 30 px in the snippet below:
nav {
padding-left: 5px
}
nav .main-nav {
height: 80px;
width: 100%;
margin-top: 64px;
background: url(../images/navHeader.png) no-repeat top;
position: relative
}
nav .main-nav ul {
width: 360px;
height: 80px;
margin-top: 2px;
padding: 0;
list-style-type: none
}
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 115px;
line-height: 30px;
height: 30px
}
nav .main-nav ul a {
text-align: center;
font-weight: 750;
font-size: 15px;
color: #84827d;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
nav .main-nav ul a:hover {
text-decoration: none;
color: #7289da
}
nav .main-nav li .dropdown {}
nav .main-nav .dropdown-content {
position: absolute;
display: none;
float: left;
z-index: 10;
-webkit-box-shadow: 0 3px 5px 0 #999;
-moz-box-shadow: 0 3px 5px 0 #999;
box-shadow: 0 3px 5px 0 #999;
border: 1px solid #CCC;
background: #3A4FC5;
color: #656161;
opacity: .8;
min-width: 10%;
top: 60px;
}
nav .main-nav .dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
nav .main-nav .dropdown-content a:hover {
background-color: #3A4FC5
}
nav .main-nav .dropdown:hover .dropdown-content {
display: inline-block;
}
<nav>
<div class="main-nav">
<ul class="left">
<li class="dropdown">Home
<div class="dropdown-content">
Third
Third Link
Third Link 3
</div>
</li>
<li>Gods</li>
<li>Goddesses</li>
</ul>
<div class="play-now"></div>
<ul class="right">
<li>Heroes</li>
<li>Myths</li>
<li>Beasts</li>
</ul>
</div>
</nav>
Your dropdown anchors inherit properties from the following rule:
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 115px;
line-height: 80px;
height: 80px
}
You can provide a more specific rule below like this:
nav .main-nav .dropdown-content a {
/* Set your height and line-height to whatever you want it to be to make the space between your items smaller */
height: 40px;
line-height: 40px
}
An easier way to manage this however would be set the height and line-height to their initial values and use padding:
nav .main-nav .dropdown-content a {
height: auto;
line-height: initial;
padding: 5px 0;
}
Working on a website (inherited someone else's code) and I'm trying to make a dropdown menu. The dropdown appears correctly when I hover over the item, but as soon as I mouse down to the dropdown list items, they disappear. Can someone help me figure out what's wrong here?
#nav {
position:fixed;
top: -1em;
background: #000;
font-family: 'Abel', sans-serif;
font-size: 1.25em;
letter-spacing: 0.05em;
width:100%;
text-align:right;
padding: 1.25em;
z-index: 3;
}
#nav li {
list-style-type: none;
display: inline-block;
margin: 0em 0.25em;
color: #90918F;
}
#nav li a {
text-decoration: none;
display: inline-block;
padding: 0em 0.5em;
margin: 0;
color: #90918F;
}
#nav li a:hover {
text-decoration: none;
color: #90918F;
}
#nav li a.active {
text-decoration: none;
color: #90918F;
}
#nav li.space {
padding: 2em;
}
ul {
padding: 0.05em;
}
#nav ul {
z-index: 3;
margin-top: 0;
background: #000;
display: none;
position: absolute;
top: 72px;
right: 450px;
}
#nav ul li {
display: block;
padding: 0.75em;
text-align: left;
}
#nav li:hover > ul {
display: block;
}
#nav li > ul:hover {
position: absolute !important;
}
#nav ul li:after {
position: absolute;
left: 5%;
top: -20px;
width: 0;
height: 0;
content: '';
}
<ul id="nav">
<div id="logo">
<img src="images/logo.png" class="logo">
</div>
<li>ABOUT
<ul class="dropdown">
<li>Values</li>
<li>Our Team</li>
</ul>
</li>
<li>SERVICES</li>
<li>CLIENTS</li>
<li>STUDENTS</li>
<li>CONTACT</li>
</ul>
Could someone explain to me why navigating away from the main menu item causes the sub-menu to vanish? And possibly provide a fix. My google-foo skills are below par this morning. Thanks all.
CSS:
body, html{
margin: 0;
}
.content{
padding: 30px;
}
.nav-main{
width: 100%;
background-color: #222;
height: 70px;
color: #fff;
}
.nav-main > ul{
margin: 0;
padding: 0;
float: left;
list-style-top: none;
}
.nav-main > ul > li {
float: left;
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
color: #fff;
text-decoration: none;
}
.nav-item:hover{
background-color: #444;
}
.nav-content{
position: absolute;
top: 70px;
overflow: hidden;
background-color: #222; /* same color as main nav*/
max-height: 0; /*will not display if .nav-content no padding */
}
.nav-content a{
color: #fff;
text-decoration: none;
}
.nav-content a:hover{
text-decoration: underline;
}
.nav-sub{
padding: 20px;
}
.nav-sub ul{
padding: 0;
margin: 0;
list-style-type: none;
}
.nav-sub > ul > li{
display: inline-block;
}
.nav-sub ul li a{
padding: 5px 0;
}
.nav-item:focus{
background-color: #444; /*remove if click focus not necessary*/
}
.nav-item:hover ~ .nav-content{
max-height: 400px;
-webkit-transition:max-height 0.6s ease-in;
-moz-transition:max-height 0.6s ease-in;
transition:max-height 0.6s ease-in;
}
HTML:
<body>
<nav class="nav-main">
<ul>
<li>
first
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>this is a thing</li>
<li>this is a thing 2</li>
</ul>
</div>
</div>
</li>
<li>
second
</li>
<li>
third
</li>
</ul>
</nav>
<div class="content">this is content</div>
</body>
I have changed:
.nav-item:hover ~ .nav-content{
To
nav > ul > li:hover > .nav-content{
And now it's working - example:
https://jsfiddle.net/saxkayv2/
This is my JSFIDDLE DEMO
Hover works fine, but I want to show the sub menu when i click on an option locks the submenu and then if hover on the main menu, display sub menu options but to stay on the other,
any help?
<div id="cssmenu">
<div class="divul">
<ul>
<li class="has-sub">
<a>Buscador</a>
<ul>
<li><a>Busqueda Datos</a></li>
<li><a>Estadisticas</a></li>
</ul>
</li>
<li class="has-sub">
<a>Clientes</a>
<ul>
<li><a>Buscador Clientes</a></li>
<li><a>Nuevo Cliente</a></li>
</ul>
</li>
<li class="has-sub">
<a>Incidencias</a>
<ul>
<li><a>Nuevo Incidencia</a></li>
<li><a>Buscador Incidencias</a></li>
</ul>
</li>
</ul>
</div>
#cssmenu{
border-bottom: 1px solid #278204;
margin-top: 10px;
}
#cssSubmenu{
background-color: #CCCCCC;
height: 30px;
/*margin-top: 10px;*/
}
#cssmenu ul{
height: 21px;
display: inline-block;
background-color: #278204;
margin-left: 15px;
padding-top: 5px;
}
.divul{
background:
url(/CI_Gestion_incidencias/images/menuL.png) left no-repeat,
url(/CI_Gestion_incidencias/images/menuR.png) right no-repeat;
display: inline-block;
padding-right: 29px;
margin-left: -3px;
}
#cssmenu ul li
{
height: 30px;
color: #FFF;
list-style: none;
display: inline;
padding-right: 20px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 4px;
z-index: 1000;
}
/**
**/
/*#cssmenu li a {
color: #666666;
display: block;
font-weight: bold;
line-height: 30px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
*/
#cssmenu li:hover {
background: #CCCCCC;
color: #000;
text-decoration: none;
}
#cssmenu li ul {
background: #CCCCCC;
display: none;
height: 25px;
filter: alpha(opacity=95);
opacity: 0.95;
position: absolute;
z-index: 200;
margin-left: 0px;
margin-top: 2px;
width: 100%;
}
#cssmenu li:hover > ul {
display: block;
}
#cssmenu li li {
display: block;
color: #000;
display: inline;
/* float: none;
padding: 0px;
position: relative;*/
}
#cssmenu li li:active {
display: block;
color: #000;
display: inline;
}
#cssmenu li ul a {
color: #000;
display: inline;
font-size: 12px;
font-weight: bold;
text-align: left;
text-decoration: none;
}
If you want show on click then use jquery.
You can try below code:
Demo
$('.has-sub a').click(function(){
$('.has-sub ul').hide();
$(this).next().show();
});
You can use tabindex="0" in HTMl and :focus in CSS together: DEMO
<li class="has-sub" tabindex="0">
#cssmenu li:hover > ul,
#cssmenu li:focus > ul{
display: block;
}