CSS
.nested-menu {
.list-group-item {
cursor: pointer;
}
.nested {
list-style-type: none;
}
ul.submenu {
height: 0;
}
& .expand {
ul.submenu {
list-style-type: none;
height: auto;
li {
a {
color: #FFF;
padding: 10px;
display: block;
}
}
}
}
}
HTML
<div class="nested-menu">
<a class="list-group-item" (click)="addExpandClass('pages')">
<span>
<i class="fa fa-universal-access"></i>
Account
</span>
</a>
<div class="nested" [class.expand]="showMenu === 'pages'">
<ul class="submenu">
<li>
<a [routerLink]="['account/password']" (click)="eventCalled()">
<span>Password reset</span>
</a>
</li>
<li>
<a [routerLink]="['account/user']" (click)="eventCalled()">
<span>User</span>
</a>
</li>
</ul>
</div>
</div>
before clicking it looks like this. height: 0 is not hiding the child links. How to hide them ?
You need to add overflow:hidden; to your submenu class.
ul.submenu {
height: 0;
overflow: hidden;
}
You cannot set the height for inline elements. You will have to convert that to either block element or inline-block element to be able to do it.
Set display: inline-block; or display: block;
Related
I have a mock up sample code below that displays a nested sub menu on my project
.navigation {
.cmp-navigation {
.cmp-navigation__group {
.cmp-navigation__item--level-0 {
display: inline-block;
padding: 10px;
.cmp-navigation__item-link {
color: red;
}
.cmp-navigation__group {
position: absolute;
display: block;
.cmp-navigation__item--level-1 {
.cmp-navigation__item-link {
color: yellow;
}
.cmp-navigation__group {
left: 100%;
position: absolute;
top: 0px;
.cmp-navigation__item--level-2 {
.cmp-navigation__item-link {
color: orange;
}
}
}
}
}
}
}
}
}
.navigation {
.cmp-navigation {
.cmp-navigation__group {
.cmp-navigation__item--level-0 {
display: inline-block;
padding: 10px;
.cmp-navigation__item-link {
color: red;
}
.cmp-navigation__group {
position: absolute;
display: block;
.cmp-navigation__item--level-1 {
.cmp-navigation__item-link {
color: yellow;
}
.cmp-navigation__group {
left: 100%;
position: absolute;
top: 0px;
.cmp-navigation__item--level-2 {
.cmp-navigation__item-link {
color: orange;
}
}
}
}
}
}
}
}
}
.cmp-navigation__item--level-1 {
display: none;
}
<div class="navigation aem-GridColumn aem-GridColumn--default--12">
<nav class="cmp-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul class="cmp-navigation__group">
<li class="cmp-navigation__item cmp-navigation__item--level-0">
Home
</li>
<li class="cmp-navigation__item cmp-navigation__item--level-0">
Equipments
<ul class="cmp-navigation__group">
<li class="cmp-navigation__item cmp-navigation__item--level-1">
Trucks
</li>
<li class="cmp-navigation__item cmp-navigation__item--level-1">
Woods
</li>
</ul>
</li>
</ul>
</nav>
</div>
And the output is something like this
The code above works fine but my problem is how to apply the hover on sub menu. My target for this nested view is to apply the hide and show on hover. Thanks for the help
First you need to hide the submenu items using display: none. Then you need to add :hover to the parent of the submenu to change from display: none to display: block. Here's an example.
nav ul li ul li {
display: none;
}
nav ul li:hover ul li {
display: block;
}
<div class="navigation aem-GridColumn aem-GridColumn--default--12">
<nav class="cmp-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul class="cmp-navigation__group">
<li class="cmp-navigation__item cmp-navigation__item--level-0">
Home
</li>
<li class="cmp-navigation__item cmp-navigation__item--level-0">
Equipments
<ul class="cmp-navigation__group">
<li class="cmp-navigation__item cmp-navigation__item--level-1">
Trucks
</li>
<li class="cmp-navigation__item cmp-navigation__item--level-1">
Woods
</li>
</ul>
</li>
</ul>
</nav>
</div>
I want to create a menu with a 'button' (anchor) in the last <li>.
So far so good, but when I want to create the button, I can't get it to vertical center it.
Here is a live demo.
nav
{
width: 100%;
height: 60px;
background-color:blue;
}
ul
{
list-style-type:none;
}
li
{
height: 60px;
color: #000000;
font-family: $font-family-semi-bold;
float:left;
background-color:green;
line-height:60px;
margin-left: 20px;
margin-right: 20px;
}
.vertical
{
display: inline-block;
height: 40px;
background-color:red;
}
<nav>
<ul>
<li>Hello World1</li>
<li>Hello World2</li>
<li>Hello World3</li>
<li>
<a href="#" class="vertical">
Vertical align this!
</a>
</li>
</ul>
</nav>
If you would like to vertically center the <a> tag as well as the text inside of it, you can use flexbox.
CSS
.vertical
{
display: inline-flex;
align-items: center;
}
JSFiddle
nav
{
width: 100%;
height: 60px;
background-color:blue;
}
ul
{
list-style-type:none;
}
li
{
height: 60px;
color: #000000;
font-family: $font-family-semi-bold;
float:left;
background-color:green;
line-height:60px;
margin-left: 20px;
margin-right: 20px;
}
.vertical
{
display: inline-flex;
align-items: center;
height: 40px;
background-color:red;
}
<nav>
<ul>
<li>Hello World1</li>
<li>Hello World2</li>
<li>Hello World3</li>
<li>
<a href="#" class="vertical">
Vertical align this!
</a>
</li>
</ul>
</nav>
Add vertical-align: middle to .vertical.
code updated https://jsfiddle.net/wksfdszu/1/
Vertical-align as #tatty say is ok but you also need to adjust the height of the element:
.vertical
{
display: inline-block;
height: 60px;
background-color:red;
vertical-align: middle;
}
Otherwise it wil not be on the same line with your other elements
I have a navigation bar with a list of links and a search bar. It looks like this:
<ul>
<li class="link">Link 1</li>
<li class="link">Link 2</li>
<li class="link">Link 3</li>
<li class="link search">search</li>
</ul>
When the user hovers the "search" element, I want to
Apply a width of 500px to the hovered search elements
Apply a margin of -150px to the sibling "link" element
The CSS that I've written to do this is:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 500px;
float: right;
}
.link {
width: 150px;
float: left;
line-height: 80px;
}
.search {
background: red;
width: 50px;
}
.search:hover{
width: 500px
}
.search:hover + .link {
margin-left: -150px;
}
This however has no effect on the sibling "link" elements
With pure CSS, is it possible to apply the the declarations "margin-left: -150px" on the hover of "search"?
I've created a fiddle here to illustrate the problem
https://jsfiddle.net/qut1nz9j/
If you use flex you can do like this. (Current browser support ~96%)`
The trick is you put the search link first in your markup and use order to show it last. With this you can use the sibling selector ~ to achieve what you want.
nav {
width: 700px;
background: green;
height: 80px;
float: left;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 500px;
display: inline-flex;
}
.link {
width: 150px;
line-height: 80px;
order: 1;
}
.search {
background: red;
width: 50px;
order: 2;
}
.search:hover {
width: 500px
}
<nav>
<span>Site Name</span>
<ul>
<li class="link search">search</li>
<li class="link">Link 1</li>
<li class="link">Link 2</li>
<li class="link">Link 3</li>
</ul>
</nav>
Thanks to Joum, here is a nice addition to my solution: https://jsbin.com/yipujadewi/edit?css,output
If someone really need to target previous sibling and can't use flex, here is an abuse of direction: ltr/rtl in combination with display: table.
Src: CSS Tables, Invert order of displayed content
nav {
width: 700px;
background: green;
height: 80px;
float: left;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 500px;
display: inline-table;
direction: rtl;
}
.link {
width: 150px;
line-height: 80px;
display: table-cell;
direction: ltr;
text-align: left;
}
.search {
background: red;
width: 50px;
}
.search:hover {
width: 500px
}
.search:hover ~ .link {
color: #fff;
}
<nav>
<span>Site Name</span>
<ul>
<li class="link search">search</li>
<li class="link">Link 3</li>
<li class="link">Link 2</li>
<li class="link">Link 1</li>
</ul>
</nav>
<div class="nav">
<ul class="nav">
<a class="nav" href="#">
<li class="nav">item1</li>
</a>
<a class="nav" href="#">
<li class="nav">item2</li>
</a>
<a class="nav" href="#">
<li class="nav">item3</li>
</a>
</ul>
<div class="line"></div>
</div>
This is my HTML navbar
CSS:
ul.nav {
display: inline-block;
font-size: 0;
}
li.nav {
display:inline-block;
border-bottom: 2px solid gray;
padding: 15px 20px;
text-align: center;
font-size: 16px;
}
div.nav {
width: 100%;
display: inline-block;
}
How do I style the div.line so it is exactly next to the list (right), fills the rest of the page (width) and has the same height as the ul.nav/div.nav?
Thanks,
First of all, sorry about the english level!
You can do something like:
.line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: gray;
}
e.g: http://jsfiddle.net/X8fE4/
That's basically turn the div.line into an absolute alement behind your navigation. It will have the width of the parent div.nav, it's not a beautiful solution, but is well supported :)
this might help you:
preview: http://jsfiddle.net/webcarvers/7uZgW/3/embedded/result/
code: http://jsfiddle.net/webcarvers/7uZgW/3/
JS:
$(document).ready(function(){
$("div.two").css({
//-2 is for border width
"width": ($(window).width() - $("div.nav").outerWidth() - 2) + "px",
"height": ($("div.nav").height()-2) + "px"
});
});
div.nav {
display: flex;
display: ms-flex;
display: -webkit-flex;
{
Edit: You also need to add the property flex-grow to .line.
.line {
flex-grow: 1;
}
http://jsfiddle.net/eWHnU/
When the menu "product" is clicked or mouse over, the another list of menus appear.. but the image block which is below the menu bar, moves away from the position. if i use css [ position:absolute;], then the image box remains static and the product's sub-menu overlaps the image block, which is what i wanted. but the image blocks width & height settings change drastically, thereby spoiling the alignment.
pls chk the codings in jsFiddle
.home_menu {
border: 1px solid black;
width: 98%;
height: 3.3%;
margin-right: auto;
margin-left: auto;
}
div#menuDemo {
clear: both;
//border:1px solid black;
height: 78%;
width: 100%;
position: relative;
left: 0;
top: 0;
background-color: #A55927;
/*Remove this next one in production - Used for demo purpose only*/
margin-bottom: 0.1%;
padding-top: 0.7%;
z-index: 4;
}
div#menuDemo ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #A55927;
}
div#menuDemo > ul > li {
float: left;
text-align: center;
}
div#menuDemo ul li {
width: 25%;
//border: 5px solid purple;
}
div#menuDemo ul li a {
text-decoration: none;
font-weight: bolder;
text-align: center;
}
div#menuDemo > ul > li > ul {
display: none;
text-align: center;
}
div#menuDemo > ul > li:hover > ul {
display: block;
text-align: center;
}
.sub1 {
width: 100%;
//border:1px solid green;
}
.colouring {
color: black;
font-weight: bolder;
}
.colour {
//border:1px solid blue;
color: black;
text-align: center;
//width:100%;
}
.wrapper {
border: 5px solid pink;
width: 98.8%;
height: 82%;
margin-top: 1%;
z-index: 2;
}
.uniform_block {
border: 5px solid green;
width: 100%;
height: 40%;
cursor: pointer;
}
.uniform_block img {
width: 100%;
height: 100%;
}
<body>
<div class="home_menu">
<div id="menuDemo">
<ul>
<li id="homeMenu">About Us
</li>
<!-- <li >About Us</li> -->
<li>Products
<ul class="sub1">
<li> Uniforms
<ul>
<li>  
</li>
<li> Automobile Industry Uniforms
</li>
<li> Pharmaceutical Uniforms
</li>
<li> Food Industry Uniforms
</li>
<li> Government Sector Uniforms
</li>
<li> School/College Uniforms
</li>
<li>  
</li>
</ul>
</li>
<li>Shoes
<ul>
<li>  
</li>
<li> Industrial Shoes
</li>
<li> Safety & Security Shoes
</li>
<li> Executive Shoes
</li>
<li>  
</li>
</ul>
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="uniform_block">
<img src=" http://t0.gstatic.com/images?q=tbn:ANd9GcSH-kRi3rkVciPcH_c6dDJJI6C1ntzwcKl9MoVQIyuKk8F7unpf" />
</div>
<div class="home_footer">
<div class="footer_contents"></div>
</div>
</div>
</body>
kindly help. My requirement is, when i mouse over the "product menu", the drop down menu should be viewed above the image block which is below the menu bar.
Add position:absolute to the css of your ul menu (in your case, the sub1 class), and remove the width:100% so it can inherit the default width of its parent. Absolute positioning will prevent your browser from trying to put your ul element after the previous element on the page.
ul.sub1 {
position:absolute;
}
http://jsfiddle.net/C2YXp/2/