How i make the child lists expand and collapse by click ?
.tree-list li > ul{
display: none;
}
See the Pen Pure CSS Fullscreen Overlay Menu .
You can use it by jquery/javascript or you can simply use css for hover.
for jquery just write onclick ul display:block along with this css.
<nav id="dropdown">
<ul>
<li>Menu
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
</ul>
</nav>
In CSS
#dropdown
{
margin-top:15px
}
#dropdown ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#dropdown ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#dropdown ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#dropdown ul li:hover
{
background:#f6f6f6
}
#dropdown ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#dropdown ul ul li
{
float:none;
width:200px
}
#dropdown ul ul a
{
line-height:120%;
padding:10px 15px
}
#dropdown ul ul ul
{
top:0;
left:100%
}
#dropdown ul li:hover > ul
{
display:block
}
Related
I got a navbar with several levels that i changed acording to this site:https://codepen.io/philhoyt/pen/ujHzd
I've looked around on the internet but the solutions they provide (using display:inline-block) did not seem to work out.
Sources i've tryed:
How to center a navigation bar with CSS or HTML?
how to center css navigation bar
Any help would be appriciated.
#primary_nav_wrap
{
margin:auto;
}
#primary_nav_wrap ul
{
list-style:none;
text-align:center;
position:relative;
float:left;
margin:auto;
padding:0;
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:Futura;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
<nav id="primary_nav_wrap">
<ul>
<li>Nieuws</li>
<li>Info ▼
<ul>
<li>Taf & Toetje</li>
<li>Papierwerk</li>
<li>Uniform</li>
<li>Technieken</li>
</ul>
</li>
<li>Algemeen</li>
<li>Foto's</li>
<li>Inschrijven</li>
<li>Contact</li>
<li>Permekiaan ▼
<ul>
<li class="dir">Kapoenen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Kawellen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Jong-Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
I made some changes to these two classes:
#primary_nav_wrap
{
margin:auto;
text-align:center;
}
#primary_nav_wrap ul
{
list-style:none;
text-align:center;
display: inline-block;
position:relative;
margin:auto;
padding:0;
}
The solution was to use display:inline-block and text-align:center;. But also deleting the float: left. Working Fiddle
Try to add :
position: absolute;
left: 50%;
transform: translateX(-50%);
at #primary_nav_wrap
You can use this code to center the whole nav.
#primary_nav_wrap ul {
list-style: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
right: 0;
margin: 0;
padding: 0;
}
I removed the float from the ul and li's and added display: inline-block to the li tags, so I ended up with this:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
text-align: center;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
display: inline-block;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
Add class to <ul> make it <ul class="extra"> and add css to that class .extra{left:33.33%}
You just need to make few changes in your css classes.
#primary_nav_wrap ul li
{
position:relative;
/*float:left;*/
margin:0;
padding:0;
display:inline-block;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
/*float:left;*/
margin:0;
padding:0;
text-align:center
}
Please check updated fiddle
HTML Center navbar with flexbox
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:Futura;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/* flexbox */
#primary_nav_wrap {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: auto;
background-color: lightgrey;
}
#primary_nav_wrap ul {
list-style:none;
background-color: cornflowerblue;
//padding: 1rem;
//margin: 1rem;
-webkit-align-self: center;
align-self: center;
}
/* || flexbox */
<nav id="primary_nav_wrap">
<ul>
<li>Nieuws</li>
<li>Info ▼
<ul>
<li>Taf & Toetje</li>
<li>Papierwerk</li>
<li>Uniform</li>
<li>Technieken</li>
</ul>
</li>
<li>Algemeen</li>
<li>Foto's</li>
<li>Inschrijven</li>
<li>Contact</li>
<li>Permekiaan ▼
<ul>
<li class="dir">Kapoenen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Kawellen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Jong-Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
What happens if you add left and right auto margins to primary_nav_wrap? i.e. add this to CSS:
#primary_nav_wrap
{
margin-top:15px;
margin-right: auto;
margin-left: auto;
}
I am trying to do a Menu that will appear when Window width is resized to a small resolution. Below is the HTML and CSS are below
<nav>
<a id="menu-dropdown"><img src="http://localhost/influenza/logo/menu.png" /></a>
<ul>
<li><a class="tab-click" href="http://localhost/influenza/index.php">Home</a></li>
<li>Articles</li>
<li>Webinars</li>
</ul>
</nav>
CSS:
nav ul
{
list-style:none;
}
nav li{
display:inline;
line-height:1.5px;
}
nav li:not(:first-child) > :only-child,
nav ul > :first-child a{
text-decoration:none;
font-size:1.4em !important;
outline:1px solid blue;
padding:8px;
letter-spacing:0.9px;
margin-left:18px;
}
nav li:not(:first-child) > :only-child{
color:blue;
}
nav ul > :first-child a{
color:white !important;
background:blue;
}
Output in Horizontal:
Home Articles Webinars
How can I bring back the list to Vertical then set "ul" position to absolute and make "nav a" to be visible. The list should display vertically like below
Home
Articles
Webinars
nav{
position:relative;
}
nav ul
{
position:absolute;
top:40px; /* this height is same as the menu.png */
left:0;
z-index:999;
list-style:none;
}
nav li{
list-style:none;
display:block;
}
nav ul li a{
display:block;
}
nav li:not(:first-child) > :only-child,
nav ul > :first-child a{
text-decoration:none;
font-size:1.4em !important;
outline:1px solid blue;
padding:8px;
letter-spacing:0.9px;
margin-left:18px;
}
nav li:not(:first-child) > :only-child{
color:blue;
}
nav ul > :first-child a{
color:white !important;
background:blue;
}
<nav>
<a id="menu-dropdown"><img src="http://localhost/influenza/logo/menu.png" /></a>
<ul>
<li><a class="tab-click" href="http://localhost/influenza/index.php">Home</a></li>
<li>Articles</li>
<li>Webinars</li>
</ul>
</nav>
Having a menu with li and ul tags
<div class="menu">
<ul class="hide-for-small">
<li>one
</li>
<li>two
<ul>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
</ul>
</li>
<li>three
</li>
<li>four
</li>
</ul>
</div>
I want to divide this menu in four equal parts, to do that I added
.menu {
height:555px;
margin-top:40px;
width:980px;
position:absolute;
z-index:9999;
top:0
}
.menu ul {
display:inline;
list-style:none;
width:100%;
position:relative;
margin-top:40px
}
.menu li {
float:left
}
.menu li a {
font-family:Bariol, Arial;
font-size:20px;
text-transform:uppercase;
color:#000
}
.menu li a:hover {
opacity:.8
}
.menu li:nth-last-of-type(-n+3) {
float:right;
margin-left:38px
}
.menu li:nth-child(-n+3) {
margin-right:38px
}
.menu ul li:hover ul {
visibility:visible;
opacity:1;
transition-delay:0
}
.menu ul li ul {
visibility:hidden;
opacity:0;
transition:visibility 0 linear .5s, opacity .5s linear;
list-style:none;
float:left;
clear:both;
position:absolute;
margin:0;
width:auto;
z-index:999999
}
.menu ul li:hover ul {
visibility:visible;
opacity:1;
transition-delay:0
}
.menu ul li ul li {
float:left;
float:none !important;
position:relative;
display:block;
height:25px;
margin:0 !important
}
.menu ul li ul li a {
font-size:15px;
display:block;
margin:10px 0;
background-color: #fff
}
and chaged width from 100% to 25%
.menu ul {
display:inline;
list-style:none;
width:100%;
position:relative;
margin-top:40px
}
But I am getting undesired result.
How to change the css to split in 4 the menu?
Please take a look at jsfiddle
Table layout with table-layout: fixed; can split the 4 li equally.
display:table; table-layout: fixed; - for ul
display:table-cell; for li, and remove float for li.
JsFiddle
Remove float:right; from following class.
.menu li:nth-last-of-type(-n+3) {
margin-left:38px
}
jsFiddle
Hi There can anyone help me i try to create a dropdown submenu but it doesn't work for me.
I dont know how to reate a nice menu.
example:
When i hover over "massages" then the menu must come down and show the submenu.
css here
.menu{
width:821px;
height:42px;
margin:0px;
background:url(images/menu.gif) no-repeat left;
}
.menu ul{
list-style:none;
padding:0 0 0 15px;
margin:0px;
}
.menu ul li{
display:inline;
}
.menu ul li ul{
display:inline;
}
.menu ul li a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
color:#fff;
line-height:42px;
font-size:14px;
}
.menu ul li.aktivni-active a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
line-height:42px;
font-size:14px;
Html:
<div class="menu">
<ul>
<li class="aktivni-active">Home</li>
<li>Massages</li>
<ul>
<li>Aanbiedingen</li>
</ul>
<li>Aanbiedingen</li>
<li>Prijzen</li>
<li>Agenda</li>
<li>Contact</li>
</ul>
</div>
Can anyone explane me how to create a dorpdown submenu on "Massages"
Thnx
Check with the below link.
Fiddle
/* Menu Dropdown */
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
}
ul#menu li ul.sub-menu a {
width:150px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
/* Top Nav Background Hover */
ul#menu li a:hover {
background:#000;
}
ul#menu li ul li a:hover {
background:#999;
}
/* 3rd level nav */
ul#menu li ul.sub-menu li ul {
display:none;
position: absolute;
top: 0px;
left: 115px;
width: 100px;
}
/* show the 3rd level when the second is hover */
ul#menu li ul.sub-menu li:hover ul {
display:block;
}
/* Menu Dropdown */
You should change your markup, as far as I know submenu should be part of list item it refers to
<ul>
<li class="simple-item">item</li>
<li class="submenu">item
<ul class="submenu-goes-inside-li">
<li class="simple-item">item</li>
<li class="simple-item">item</li>
<li class="simple-item">item</li>
</ul>
</li>
</ul
In your case submenu is separated from list items.
Using the same structure you have just add class to the drop menu,
set ul inside the dropMenu to display none, then to display on however. You can use css3 or jquery to make it have a nice animation or toggle.
<div class="menu">
<ul>
<li class="aktivni-active">Home</li>
<li class="dropMenu">Massages</li>
<ul>
<li>Aanbiedingen</li>
</ul>
<li>Aanbiedingen</li>
<li>Prijzen</li>
<li>Agenda</li>
<li>Contact</li>
</ul>
</div>
CSS
.menu ul{
display:none
}
.menu:hover ul{
display:block;
}
if you want some better just use jquery http://api.jquery.com/toggle/
I'm currently designing a Nav menu that includes ul, li and a elements. I'm trying to produce an effect where hovering over an a tag will only change the background color near the text for the link itself instead of the whole li area around it.
HTML:
<nav>
<div class="full_menu">
<ul>
<li>Login</li>
<li>About</li>
<li>FAQ</li>
<li>Blog</li>
<li>Our Team
<ul>
<li>Bob</li>
<li>James</li>
<li>Tom</li>
</ul>
</li><!--End team dropdown -->
</ul>
</div>
CSS:
nav {
margin:0 auto;
text-align:center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display:block;
}
nav ul {
background: #17A74A;
padding:0px;
list-style:none;
position:relative;
display: inline;
border:0px;
}
nav ul li {
float:right;
margin-top:0px;
}
nav ul li a {
display:block;
padding:33px 40px;
color:#000;
text-decoration:none;
font-weight:bold;
font-size:18px;
}
nav ul li a:hover {
background-color:#2D6AF7;
color:#FFF;
}
nav ul ul {
background:#17A74A;
position:absolute;
top:71px;
}
nav ul ul li {
float:none;
border-bottom:1px solid #FFFFFF;
}
nav ul ul li a {
padding:15px 40px;
color:#FFF;
}
nav ul ul li a:hover {
background:#27BCDD;
}
nav ul ul ul {
position:absolute;
left:100%;
top:0;
}
I thought that by using nav ul li a:hover would fix this problem but the whole li area is still changing its background color instead of just the immediate area around the link text.
Any help would be greatly appreciated!
Do you want to achieve following result? I've removed the padding from your <a> elements and added them to the <li> elements instead.
JSFiddle
You need to change the padding to a margin if you don't want the whole thing to change color. Try this:
nav ul ul li a {
margin:15px 40px;
color:#FFF;
}