I'm trying to change the background color of a button after hovering over it with jQuery. However, everytime I try I seem to be getting a gap on the top and bottom of each button rather than the whole button. Here's my jsFiddle: http://jsfiddle.net/Z5M2a/
HTML:
<div id="side-bar">
<ul class="side-nav">
<li class="divider"></li>
<li class="menuOption">Link 1</li>
<li class="divider"></li>
<li class="menuOption">Link 2</li>
<li class="divider"></li>
<li class="menuOption">Link 3</li>
<li class="divider"></li>
<li class="menuOption">Link 4</li>
<li class="divider"></li>
</ul>
</div>
CSS:
div#side-bar {
float: left;
width: 187px;
height: 100%;
min-height: 300px;
text-align: center;
background-color: #e9e9e9;
}
.side-nav {
padding-top: 0px;
}
.menuOption {
width: 187px;
height: 25px;
line-height: 25px;
}
div#side-bar ul li a {
color: #000;
text-decoration: none;
}
You need to reset the margin values for you li's. Currently foundation is giving them a margin-bottom of 0.4375em.
Add something like this to your CSS:
.side-bar li {
margin-bottom:0:
}
UPDATE:
Working link here:
http://codepen.io/alexbaulch/pen/wKFvf
Related
guys i have dynamic navbar . submenu will be availbe if menu have submenu. i want open submenu under related menu which is hovered and want keep submenu visible to select their item.
with this code submenu will show always at that css style position and menu will disapear when my mouse move to it... how can i solve this issue?
this is my navbar :
<nav>
<div class="nav-wrapper grey darken-3">
<ul class="right hide-on-med-and-down second-nav">
<li *ngFor="let cat of categories">
<a (mouseover)="hover($event, cat)" (mouseleave)="unhover($event)" class="dropdown-button" >{{ cat.title }}</a>
</li>
</ul>
</div>
</nav>
<!-- Dropdown -->
<div *ngIf="hoveredCategory" class="content">
<ul id="hoveredCategory" class="collection">
<li class="collection-item avatar" *ngFor="let sc of hoveredCategory.sub">
<span>
{{ sc }}
</span>
</li>
</ul>
</div>
mycss :
.content {
background-color: #FFFFFF;
margin: 0;
width: 300px;
position: absolute;
right: 0;
min-width: 300px;
max-height: inherit;
margin-left: -1px;
overflow: hidden;
white-space: nowrap;
z-index: 1;
}
hover and unhover :
hover(event, category) {
this.hoveredCategory = category;
}
unhover(event) {
this.hoveredCategory = null;
}
.navigation ul,.navigation li{
list-style: none;
margin: 0;
padding: 0;
float: left;
}
.navigation li{
background:rgba(0,0,0,0.3);
position: relative;
}
.navigation li a {
padding: 15px;
display:block;
text-decoration:none;
}
.navigation ul ul{
display: none;
position: absolute;
top: 100%;
left: 0;
}
.navigation li:hover ul{
display: block;
}
<div class="navigation">
<ul>
<li>
Menu Item
<ul>
<li>Sub Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</div>
Try this one.
I've searched around and found a lot of questions about this problem, but none of the answers I tried seemed to work in my case. So I have a unordered list inside of the nav tag and I want the list to be centered relative to the parent nav tag. But the list is always a bit to the right and never in the center no matter what I tried.
HTML pretty straight forward:
<nav>
<ul>
<li>MENU</li>
<li>Opt 1</li>
<li>Opt 2</li>
<li>Opt 3</li>
</ul>
</nav>
Here is the CSS so far:
nav {
float: left;
width:15%;
margin: 0;
padding:0;
background:gray;
text-align:center;
}
nav ul {
list-style-type: none;
color:blue;
}
Any ideas how can I get this to work?
try this
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
this is because ul have a padding and margin applied to it by browsers by default you need to remove them
nav {
float: left;
width: 50%;
margin: 0;
padding: 0;
background: gray;
text-align: center;
}
nav ul {
list-style-type: none;
color: blue;
margin: 0;
padding: 0;
}
<nav>
<ul>
<li>MENU</li>
<li>Opt 1
</li>
<li>Opt 2
</li>
<li>Opt 3
</li>
</ul>
</nav>
Test this:
<nav>
<ul>
<li>MENU</li>
<li>Opt 1</li>
<li>Opt 2</li>
<li>Opt 3</li>
</ul>
</nav>
nav {
display:table;
margin:0 auto;
padding : 10px;
}
To achieve this layout of a fully justified menu list, I can not use CSS pseudo-classes to display separators between list items; instead, I have to put the separator directly in the HTML.
Since according to HTML5 standard in an <ul> only <li> and script-supporting elements are allowed, I made the below code. It is valid HTML5 but it seems quirky to me. Any concerns?
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
li.home {
padding: 0;
}
li,
script::after {
vertical-align: middle;
padding-top: 10px;
}
nav {
border-bottom: 1px solid black;
border-top: 1px solid black;
height: 40px;
}
script.separator {
display: block;
}
script.separator::after {
content: "*";
}
<nav id="main-menu">
<ul>
<li class="home">
<img src="http://dummyimage.com/40x40/000/fff">
</li>
<script class="separator"></script>
<li class="second">Item 1</li>
<script class="separator"></script>
<li>Item 2</li>
<script class="separator"></script>
<li>One more Item</li>
<script class="separator"></script>
<li>Another Item</li>
<script class="separator"></script>
<li class="last">Contact</li>
</ul>
</nav>
Replace the <script> with another <li> and simply assign a style to it with
ul li:nth-of-type(even) {
display: block;
content: "*";
vertical-align: middle;
padding-top: 10px;
}
This will have the same effect but will look much neater on the code view.
<nav id="main-menu">
<ul>
<li class="home">
<img src="http://dummyimage.com/40x40/000/fff">
</li>
<li></li>
<li class="second">Item 1</li>
<li></li>
<li>Item 2</li>
<li></li>
<li>One more Item</li>
<li></li>
<li>Another Item</li>
<li></li>
<li class="last">Contact</li>
</ul>
</nav>
You may have to tweak the actual CSS in the rule above to suit your look and feel but as a concept I think it's neater and cleaner to have all <li> elements and then use CSS to intelligently select all of the correct ones. This also reduces the number of class=" ... " laying around too.
You can also potentially add further rules so that for example you do not do the seperator CSS on the last of type, so the final li would never be the seperator either:
ul li:nth-of-type(even), ul li :not(:last-of-type) {
display: block;
content: "*";
vertical-align: middle;
padding-top: 10px;
}
I'm not sure this is the exact layout you're after, but can you not use display: table and a border?
ul {
margin: 0;
padding: 0;
list-style: none;
display: table;
width: 100%;
}
li {
display: table-cell;
text-align: center;
}
li:not(:last-child) {
border-right: 1px solid #333;
}
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
I have a menu which needs to expand to show the child elements on hover. According to the design the expanded child ul needs to expand across the full width of the page so needs to be absolutely positioned in order to break out from the width of the parent li.
The problem is that I need the child ul to remain visible as you hover over it. Because it is absolutely positioned it no longer contained by the parent li, so as soon as my mouse moves off that it disappears.
If I change the parent li to position:relative the ul remains visible when the mouse moves over it, but the child ul no longer fills 100% width of the page.
Here is a fiddle to demonstrate:
https://jsfiddle.net/sx2aouht/12/
Here is abbreviated markup (full code on the fiddle link above):
<nav class="priority-nav">
<ul class="menu">
<li class="first expanded active-trail active menu-mlid-178 help">Help & Advice
<ul class="menu">
<li class="first leaf menu-mlid-526">Find your local services</li>
<li class="leaf menu-mlid-528">Join CarerSmart</li>
<li class="leaf menu-mlid-527">Join our online community</li>
</ul>
</li>
</ul>
</nav>
Here is the css:
.priority-nav ul li {
//if this is uncommented the ul will remain visible when
//the mouse is over it, but the ul will not fill the page 100%
//position: relative;
float: left;
padding: 0 10px;
list-style-type: none;
}
.priority-nav ul li ul {
display: none;
position: absolute;
top: 40px;
left: 0;
background-color: red;
width: 100%;
padding: 50px 130px;
}
.priority-nav ul li:hover ul {
display: block;
}
The menu already stays open when you hover the submenu, the problem is that when the mouse goes down to the submenu, it leaves the hovered li element, in order to avoid this make sure that when the mouse enters the submenu, it will not leave the main li you hover, the submenu is in the li item, so hovering it is considered hovering the main li.
You just have to avoid leaving the main li until you enter the submenu, I used some padding in your example:
.priority-nav ul li {
//if this is uncommented the ul will remain visible when
//the mouse is over it, but the ul will not fill the page 100%
//position: relative;
float: left;
padding: 0 10px 5px;
list-style-type: none;
}
.priority-nav ul li ul {
display: none;
position: absolute;
top: 35px;
left: 0;
background-color: red;
width: 100%;
padding: 50px 130px;
}
.priority-nav ul li:hover ul {
display: block;
}
<nav class="priority-nav">
<ul class="menu"><li class="first expanded active-trail active menu-mlid-178 help">Help & Advice<ul class="menu"><li class="first leaf menu-mlid-526">Find your local services</li>
<li class="leaf menu-mlid-528">Join CarerSmart</li>
<li class="leaf menu-mlid-527">Join our online community</li>
<li class="leaf menu-mlid-530">Help and advice topic 4</li>
<li class="leaf menu-mlid-531">Help and advice topic 5</li>
<li class="leaf menu-mlid-532">Help and advice topic 6</li>
<li class="leaf menu-mlid-533">Help and advice topic 7</li>
<li class="leaf menu-mlid-534">Help and advice topic 8</li>
<li class="last leaf menu-mlid-535">Help and advice topic 9</li>
</ul></li>
<li class="expanded menu-mlid-184 community">Online Community<ul class="menu"><li class="first leaf menu-mlid-536">Discussion board</li>
<li class="last leaf menu-mlid-537">Chat</li>
</ul></li>
<li class="last expanded menu-mlid-176 get-involved">Get Involved<ul class="menu"><li class="first leaf menu-mlid-529">Donate</li>
<li class="leaf menu-mlid-538">Events</li>
<li class="leaf menu-mlid-539">Volunteer</li>
<li class="last leaf menu-mlid-540">Corporate opportunities</li>
</ul></li>
<li class="more"><span>More</span></li>
</ul>
</nav>
If the submenu is to be 100% width of the page but the top-level menu is not then we can still position the submenu in relation to the parent menu and not the li.
.priority-nav >.menu {
position: relative;
}
But we size the submenu to the width of the page with viewport units.
.priority-nav ul li ul {
display: none;
position: absolute;
top:100%;
left: 0;
background-color: red;
width: 100vw;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.cf:before,
.cf:after {
content: " ";
display: table;
/* clearfix */
}
.cf:after {
clear: both;
}
.priority-nav {
position: relative;
width: 70%;
}
.priority-nav > .menu {
background: #c0ffee;
}
.priority-nav ul li {
float: left;
padding: 0 10px;
list-style-type: none;
padding: 10px;
}
.priority-nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: red;
width: 100vw;
}
.priority-nav ul li:hover ul {
display: block;
}
<nav class="priority-nav">
<ul class="menu cf">
<li class="first expanded active-trail active menu-mlid-178 help">Help & Advice
<ul class="menu">
<li class="first leaf menu-mlid-526">Find your local services
</li>
<li class="leaf menu-mlid-528">Join CarerSmart
</li>
<li class="leaf menu-mlid-527">Join our online community
</li>
<li class="leaf menu-mlid-530">Help and advice topic 4
</li>
<li class="leaf menu-mlid-531">Help and advice topic 5
</li>
<li class="leaf menu-mlid-532">Help and advice topic 6
</li>
<li class="leaf menu-mlid-533">Help and advice topic 7
</li>
<li class="leaf menu-mlid-534">Help and advice topic 8
</li>
<li class="last leaf menu-mlid-535">Help and advice topic 9
</li>
</ul>
</li>
<li class="expanded menu-mlid-184 community">Online Community
<ul class="menu">
<li class="first leaf menu-mlid-536">Discussion board
</li>
<li class="last leaf menu-mlid-537">Chat
</li>
</ul>
</li>
<li class="last expanded menu-mlid-176 get-involved">Get Involved
<ul class="menu">
<li class="first leaf menu-mlid-529">Donate
</li>
<li class="leaf menu-mlid-538">Events
</li>
<li class="leaf menu-mlid-539">Volunteer
</li>
<li class="last leaf menu-mlid-540">Corporate opportunities
</li>
</ul>
</li>
<li class="more"><span>More</span>
</li>
</ul>
</nav>
I created a menu and a submenu that should appear after I hover over the list elements of the main menu. The problem is that the widths of the main menu's list elements changes while hovering, and it looks puzzling. I tried it with a fixed width, but the space between the menu items is too big then.
I also tried to set the submenu to position absolute, but the problem was that the submenu was always located at the same position and not beneath the main menu's item which was active.
I created a codepen for this issue.
HTML:
<ul class="menubar">
<li class="menubar-li">Unternehmen
<ul class="menubar-sub">
<li class="menubar-sub-li">Profil
<li class="menubar-sub-li">Meilensteine
<li class="menubar-sub-li">Team
<li class="menubar-sub-li">News
<li class="menubar-sub-li">Jobs</li>
</ul>
</li>
<li class="menubar-li">Kompetenzen
<ul class="menubar-sub">
<li class="menubar-sub-li">Kreation
<ul class="menubar-subsub">
<li>Strategie
<li>Design
<li>Online
<li>Reinzeichnung</li>
</ul>
</li>
<li class="menubar-sub-li"> Prepress
<ul class="menubar-subsub">
<li>Seitenproduktion</li>
<li>Kreativretusche
<li>Colormanagement
<li>Proofen</li>
</ul>
</li>
<li class="menubar-sub-li">Druck
<ul class="menubar-subsub">
<li>Personalisiert</li>
<li>Web 2 Print</li>
</ul>
</li>
<li class="menubar-sub-li">Katalogmanagement</ul>
</li>
<li class="menubar-li">Portfolio</li>
<li class="menubar-li">Service
<ul class="menubar-sub">
<li class="menubar-sub-li">Mediapool</li>
<li class="menubar-sub-li">DUON</li>
<li class="menubar-sub-li">Datenupload</li>
<li class="menubar-sub-li">Downloads
</ul>
</li>
<li class="menubar-li">Kontakt
<ul class="menubar-sub">
<li class="menubar-sub-li">Ansprechpartner</li>
<li class="menubar-sub-li">Anfahrt</li>
<li class="menubar-sub-li">Impressum</li>
</ul>
</li>
</ul>
CSS:
.menubar {
list-style: none;
position: relative;
bottom: 16px;
}
.menubar a {
color: black;
text-decoration:none;
font-size: 13px;
position: relative;
}
.menubar-li {
float: left;
height:29px;
line-height:29px;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
}
.menubar-li:hover {
background-color: #94ba1d;
cursor: pointer;
}
.menubar-li:hover .menubar-sub {
display: block;
}
.menubar-sub {
display: none;
list-style: none;
margin-top: 1px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 0px;
background-color: #94ba1d;
position: relative;
left: -10px;
}
.menubar-sub-li {
line-height: 14px;
padding-top: 5px;
padding-left: 10px;
}
.menubar-subsub {
display: none;
}
You can position the submenu below the main menu button by setting the main menu button to position: relative and placing the (absolute) submenu inside it. You then show/hide the submenu by toggling overflow: hidden and visible.
Here is a demo: http://codepen.io/seraphzz/pen/osGnh