Is it possible in Zurb Foundation to have a normal button in the top bar menu items? Here is an example:
The black button is what I'm trying to accomplish.
Here is what the HTML currently looks like:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar="" role="navigation">
<ul class="title-area">
<li class="name">
<h1>
SiteName
</h1>
</li>
<li class="toggle-topbar menu-icon">
<span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li>
Nav item
</li>
<li>
Nav item
</li>
<li>
Nav item (Should be button)
</li>
</ul>
</section></nav>
</div>
Sure, just use class button inside a has-form list item.
<li class="has-form">
<a class="button">Button</a>
</li>
Demo: http://codeply.com/go/00cVHQ15Px
Try like this, may be?
* {font-family: Segoe UI;}
nav ul,
nav ul li {margin: 0; padding: 0; list-style: none; background: #99f; overflow: hidden; display: inline-block;}
nav ul li a {text-decoration: none; display: block; width: 100px; margin: 10px; padding: 5px 10px;}
nav ul li a.btn {background: #333; color: #fff; text-align: center; border-radius: 3px;}
<nav>
<ul>
<li>New Button</li>
<li><a class="btn" href="#">New Button</a></li>
<li>New Button</li>
</ul>
</nav>
Related
Ive created a box using div class. but Ive been trying to space the row and columnsiV
Ive tried some padding-left and right both it doesnt seem to be working.
<div class="body">
<ul class="box">
<li> Maths </li>
<li> English </li>
<li> Chemistry </li>
<li> Commerce </li>
<li> Computer </li>
<li> Biology </li>
</ul>
</div>
</section>
Is there a reason you aren't just using margin? Specifically,
li {
margin: 10px;
margin-left: 30px; // if you want a different margin on the left
}
If this is not what you're looking for then please elaborate on your question.
li {
margin:10px;
margin-left:30px;
}
<div class="body">
<ul class="box">
<li> Maths </li>
<li> English </li>
<li> Chemistry </li>
<li> Commerce </li>
<li> Computer </li>
<li> Biology </li>
</ul>
</div>
To add padding between the rows, you need to add it to list elements.
Target these by using ".box li" in your CSS
You can use this code
.body .box {
margin: 0;
padding: 0;
}
.body .box li {
margin: 0;
padding: 0;
list-style-type: none;
}
.body .box li a {
margin: 0;
padding: 0 15px;
font-size: 18px;
font-weight: 400;
color: #337ab7;
line-height: 36px;
text-decoration: none;
}
.body .box li:hover a {
color: red;
}
<div class="body">
<ul class="box">
<li>Maths</li>
<li>English</li>
<li>Chemistry</li>
<li> Commerce </li>
<li>Computer</li>
<li>Biology</li>
</ul>
</div>
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 have a centered LI's UL (like those default navigation bars...) - see code below.
Now i want to make a little weird adjustment to that. i want the last li to stay sticked to the left of the last li before him (just like float: left) but without him taking space in the ul, so the other li's will be in the center and he will just be sticking in the side (maybe just like an absolute position's element will...). another thing is i that i need to work when this weird li is alone in the ul also. here is an image that explains better:
weird sticky li image before and after
and here is a codepen playground with that.
Also a built-in one here:
*{font-size:24px;text-align:center;}
.con { background: #aaa; }
.navbar { background: #eee; width:70%;margin:auto;}
.navbar li{display:inline-block; padding: 4px 8px; border: 1px solid blue;}
.last{color:red;}
.afterlast{margin-right:-78.6px;}
BEFORE:
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last">WEIRD</li>
</ul>
</nav><!-- /.navbar -->
</div>
AFTER:
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last afterlast">WEIRD</li>
</ul>
</nav><!-- /.navbar -->
</div>
Now I prefer a pure css solution if possible and of course it should be responsive.
So, combining the answer and comments made by the grateful users, this is the best answer (pure css):
Using absolute positioning.
Using the :first-child:last-child to set position to relative when the weird li is alone.
Here it is live:
* {
font-size: 24px;
text-align: center;
}
.con {
background: #aaa;
}
.navbar {
background: #eee;
width: 70%;
margin: auto;
}
.navbar ul {
padding: 0;
}
.navbar li {
display: inline-block;
padding: 4px 8px;
border: 1px solid blue;
}
.last {
color: red;
}
.afterlast:last-child {
position: absolute;
margin-left: .25em;
}
.afterlast:first-child:last-child {
position: relative;
margin-left: 0;
}
<h2>BEFORE:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
<h2>AFTER:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last afterlast">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
<h2>AFTER ALONE:</h2>
<div class="con">
<nav class="navbar">
<ul>
<li class="last afterlast">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
Thanks to: #sorayadragon, #JaKhris and #Michael Coker.
You'll have to add an additional class to that li element when it's by itself so you can adjust the styles and make it take up space again. I added the .aloneweird class and adjusted its styles. Additionally, I removed the padding-left from the ul element which was making it uncentered.
* {
font-size: 24px;
text-align: center;
}
.con {
background: #aaa;
}
.navbar {
background: #eee;
width: 70%;
margin: auto;
}
.navbar ul {
padding-left: 0;
}
.navbar li {
display: inline-block;
padding: 4px 8px;
border: 1px solid blue;
}
.last {
color: red;
}
.afterlast {
position: absolute;
margin-left: .25em;
}
.aloneweird {
position: relative;
margin-left: 0;
}
<h2>AFTER:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last afterlast">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
<h2>ALONE:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li class="last afterlast aloneweird">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
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