How can I display LI.parent side by side?
I'm using Bootstrap 3 and my HTML is:
<ul role="menu" class="dropdown-menu">
<li class="item-001 dropdown parent">
ABC
<ul role="menu" class="dropdown-submenu">
<li class="item-1">
Link 1
</li>
<li class="item-2">
Link 2
</li>
<li class="item-3">
Link 3
</li>
<li class="item-4">
Link 4
</li>
</ul>
</li>
<li class="item-002 dropdown parent">
DEF
<ul role="menu" class="dropdown-submenu">
<li class="item-1">
Link 1
</li>
<li class="item-2">
Link 2
</li>
<li class="item-3">
Link 3
</li>
<li class="item-4">
Link 4
</li>
</ul>
</li>
<li class="item-003 dropdown parent">
GHI
<ul role="menu" class="dropdown-submenu">
<li class="item-1">
Link 1
</li>
<li class="item-2">
Link 2
</li>
<li class="item-3">
Link 3
</li>
<li class="item-4">
Link 4
</li>
</ul>
</li>
</ul>
To have li elements side by side, you simply need to use a left float in your CSS like so:
.dropdown {
float: left;
}
Related
In the website I'm working on the navigation menu is made by several nested lists, when one element is clicked on the <li> element with the page name acquires the .active class, if it belongs to a nested list all parent li elements above also acquire the .active class.
I'd like to be able to style the last <li> element with class .active since it corresponds to the currently open webpage.
I'm working with Omeka s content management system, which means that I can't use javascript or modify the HTML files, so I'm looking for a solution in pure CSS.
here is the menu structure:
`
<ul class="">
<li >
Introduction
</li>
<li>
level 1
<ul>
<li>
subpage
<ul>
<li>
sub-subpage
<ul>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
here is when I'm on th page "sub-sub-page":
<ul class="">
<li >
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li class="active">
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
`
I've tried to use li.active:last-of-type but it only select the last element of type li.
ul *{
color : #000;
text-decoration: none
}
ul .active ul li ul li ul li a{
color : #f00;
font-weight : bold;
}
<ul class="">
<li >
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li class="active">
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
It appeared simpler than I first thought:
Given the current structure, from all nested active elements you need to select the li that only has an a element. To make it work in general (other than a list element) don't use the li element selector at all.
I added two differently nested examples in the snippet along with an ::after text...
.active > a:only-child { color: red }
.active > a:only-child::after { content: ' (active)' }
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li>
sub-sub-page
</li>
<li class="active">
sub-sub-page
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br><br><br>
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li>
sub-sub-page
</li>
<li>
sub-sub-page
</li>
<li class="active">
sub-subpage
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br><br><br>
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-sub-page
</li>
<li>
sub-sub-page
</li>
<li>
sub-subpage
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I need to be able to add a link to "Home" and "Pages" when clicking it but also to collapse and show the li items from below.
I changed "#homeSubmenu" from a href with a link but when clicking it does not collapse.
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
Use data-bs-target for the Collapse and href for the link..
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
which it is the best way to naming a dropdown menu with bem ?? use children nav-main__sub or modifier nav-main--sub ??
<ul class="nav nav-main">
<li class="nav__item">
home
</li>
<li class="nav__item nav__item--sub-nav">
About
<ul class="nav nav-main--sub">
<li class="nav-main--sub__item">
Company
</li>
</ul>
<li class="nav__item">
Contact
</li>
IMHO nav-main__sub, because it is not modifier.
<ul class="nav nav--main">
<li class="nav__item nav__item--sub-nav">
About
<ul class="nav nav-main__sub">
<li class="nav-main__sub-item">
Company
</li>
</ul>
</li>
</ul>
or easier:
<ul class="nav nav--main">
<li class="nav__item nav__item--sub-nav">
About
<ul class="sub">
<li class="sub__item">
Company
</li>
</ul>
</li>
</ul>
This is proving very difficult. Nav is pasted pasted below. This is a wordpress website so while I could change the structure of the html I'd rather not.
It looks like the nested drop down menus <ul> are contained within parent <li> elements.
My goal is to have, on hover, the list items be orange with 0.4 opacity. I would also like this for the drop down menu line items. Except, the problem is, that when hovering over a line item that has a drop down nested within it, the 0.4 opacity seems to apply to the whole menu, as opposed to just the hovered one. I have tried numerous things. Here is a taste of what I have tried:
.dropdown > ul li:hover { // the styling in question. Everything below is an attempt to limit this from affecting the whole drop down menus.
background-color: orange;
opacity:0.4;
}
.dropdown > ul.children li:hover, .dropdown > ul.children:hover { // trying to select just the drop down menu and take of the opacity by setting it to 1
opacity: 1;
}
ul.children li:hover { // similar to above just another attempt
opacity: 1;
}
ul.children, ul.children:hover, ul.children li, ul.children li:hover{ // just resorting to trying everything now
opacity: 1;
}
I made a fiddle too: http://jsfiddle.net/m7owomb0/
See how when you hover over the menu items with drop downs it's transparent? Then click on one of the actual links and the styling from the live site loads into the frame. When you hover there it's not transparent and you can see the items clearly. I just want them to be orange when hovered.
<div id="main-navigation">
<nav>
<div class="dropdown dropdown-horizontal">
<ul class="main-nav">
<li class="current_page_item">
<a href="http://dduck8977.webfactional.com/">
Home
</a>
</li>
<li class="page_item page-item-57">
<a href="http://dduck8977.webfactional.com/?page_id=57">
Clear Outs & Offers
</a>
</li>
<li class="page_item page-item-8 page_item_has_children">
<a href="http://dduck8977.webfactional.com/?page_id=8">
Flooring
</a>
<ul class='children'>
<li class="page_item page-item-19">
<a href="http://dduck8977.webfactional.com/?page_id=19">
Chestnut
</a>
</li>
<li class="page_item page-item-15">
<a href="http://dduck8977.webfactional.com/?page_id=15">
Douglas Fir
</a>
</li>
<li class="page_item page-item-12">
<a href="http://dduck8977.webfactional.com/?page_id=12">
Heart Pine
</a>
</li>
<li class="page_item page-item-17">
<a href="http://dduck8977.webfactional.com/?page_id=17">
Maple
</a>
</li>
<li class="page_item page-item-10">
<a href="http://dduck8977.webfactional.com/?page_id=10">
Oak
</a>
</li>
</ul>
</li>
<li class="page_item page-item-50 page_item_has_children">
<a href="http://dduck8977.webfactional.com/?page_id=50">
Locations
</a>
<ul class='children'>
<li class="page_item page-item-52">
<a href="http://dduck8977.webfactional.com/?page_id=52">
New York
</a>
</li>
<li class="page_item page-item-55">
<a href="http://dduck8977.webfactional.com/?page_id=55">
Philadelphia
</a>
</li>
</ul>
</li>
<li class="page_item page-item-21 page_item_has_children">
<a href="http://dduck8977.webfactional.com/?page_id=21">
Paneling
</a>
<ul class='children'>
<li class="page_item page-item-31">
<a href="http://dduck8977.webfactional.com/?page_id=31">
Barn Wood
</a>
</li>
<li class="page_item page-item-27">
<a href="http://dduck8977.webfactional.com/?page_id=27">
Eastern Mix
</a>
</li>
<li class="page_item page-item-29">
<a href="http://dduck8977.webfactional.com/?page_id=29">
Mushroom Wood
</a>
</li>
<li class="page_item page-item-23">
<a href="http://dduck8977.webfactional.com/?page_id=23">
Oak
</a>
</li>
<li class="page_item page-item-25">
<a href="http://dduck8977.webfactional.com/?page_id=25">
Pine & Fir
</a>
</li>
</ul>
</li>
<li class="page_item page-item-40">
<a href="http://dduck8977.webfactional.com/?page_id=40">
Patchwork
</a>
</li>
<li class="page_item page-item-37 page_item_has_children">
<a href="http://dduck8977.webfactional.com/?page_id=37">
Reclaimed Wood
</a>
<ul class='children'>
<li class="page_item page-item-47">
<a href="http://dduck8977.webfactional.com/?page_id=47">
Lumber Phrases
</a>
</li>
<li class="page_item page-item-42">
<a href="http://dduck8977.webfactional.com/?page_id=42">
Wood Types
</a>
</li>
</ul>
</li>
<li class="page_item page-item-35">
<a href="http://dduck8977.webfactional.com/?page_id=35">
Shelving
</a>
</li>
<li class="page_item page-item-33">
<a href="http://dduck8977.webfactional.com/?page_id=33">
Tables
</a>
</li>
</ul>
</div>
</nav>
</div>
How can I add styling so that hovered line items are orange with opacity 0.4, without affecting nested ULs within these line items?
You cannot override opacity in child elements, use rgba instead.
.dropdown > ul li:hover {
background-color: rgba(255,165,0,0.4);
}
I am trying to add 4 navigation buttons at right side. On Clicking which I would be able to navigate to respective divs in the same page.(just like a single page design).
I am adding following lines of codes to create 4 navigation buttons at right side of the page.
<div data-spy="affix" class="offset8 span1 well offset7 small">
<ul class="nav nav-list">
<a class=".move-1" data-target=".home-1-image"> A </a>
<a class=".move-1" data-target=".home-2-image"> B </a>
<a class=".move-1" data-target=".home-3-image"> C </a>
<a class=".move-1" data-target=".home-4-image"> D </a>
</ul>
</div>
But those lines of codes are not placing my 4 buttons at extreme right. Check snapshot.
Which bootstrap classes can be used to make it place at extreme right side and those should be fixed in position. (responsiveness should be well taken care of).
you can use .navbar-right and also add position: fixed; right: 0;.
that should do the trick
You actually need to use navbar-right, as I found out from here and used in my code:
<div class="navbar-collapse collapse navbar-right" >
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu pull-right" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
HTML
<div data-spy="affix" class="offset8 span1 well offset7 small nav">
<ul class="nav nav-list">
<a class=".move-1" data-target=".home-1-image"> A </a>
<a class=".move-1" data-target=".home-2-image"> B </a>
<a class=".move-1" data-target=".home-3-image"> C </a>
<a class=".move-1" data-target=".home-4-image"> D </a>
</ul>
</div>
CSS
.nav {
position: fixed;
float:right;
margin-right: 0px;
}