I have tried to change the hover to click
and search online already
but it still does not work
how can i change the code to onclick
so i can click and show the drop down menu?
The pattern
$* {
box-sizing: border-box;
}
ul {
padding: 0;
}
ul a {
display: inline-block;
text-decoration: none;
color: #ffefc6;
.menu {
max-width: 300px;
margin: 0 auto;
list-style-type: none;
background-color:#333;
font-weight:bold;
The effect
$.drop-down {
position: relative;
}
.submenu {
position: relative;
opacity: 0;
width: 100%;
z-index: 8;
transition: opacity 0.5s ease;
}
.submenu-item {
display: block;
height: 0px;
overflow: hidden;
transition: height 0.5s ease;
}
.drop-down:hover .submenu {
opacity: 1;
}
.drop-down:hover .submenu-item {
overflow: visible;
height: 30px;
}
About the html code
<ul class="menu">
<li class="itembox drop-down">
<a class="item" href="#">Intro</a>
<div class="submenu">
<a class="submenu-item" href="#">Seting </a>
<a class="submenu-item" href="#">Rule </a>
<a class="submenu-item" href="#">Mode </a>
<a class="submenu-item" href="#">Type </a>
</div>
</li>
You have to use JavaScript, css can't listen to click events.
function toggle(id) {
var elt = document.getElementById(id);
elt.style.display = elt.style.display=='block' ? 'none' : 'block';
}
.submenu {
display: none;
}
<ul>
<li onclick="toggle('submenu-1')">
Option 1
<ul id="submenu-1" class="submenu">
<li>Sub-option 1.1</li>
<li>Sub-option 1.2</li>
</ul>
</li>
<li onclick="toggle('submenu-2')">
Option 2
<ul id="submenu-2" class="submenu">
<li>Sub-option 2.1</li>
<li>Sub-option 2.2</li>
</ul>
</li>
</ul>
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'm trying to make it so when you hover over one of the categories in the header nav "CALLS | CHATS | MORE" the subnav below shows and the ul that is associated with the header nav changes its background color i know i can just add a class using jQuery but could i not do this with a sibling selector or something? i just think my HTML is layed out incorrectly at the moment for it to work TIA. this is what i currently have.
<header class="header">
<ul class="header__nav">
<li class="header__navItem header__navItem--calls">Calls</li>
<li class="header__navItem header__navItem--chats">Chats</li>
<li class="header__navItem header__navItem--more">More</li>
</ul>
<nav class="navigation">
<div class="navigation__wrapper cf">
<ul class="navItems navItems--calls">
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<div class="bgHover"></div>
</ul>
</div>
</nav>
</header>
.header {
height: 5.8rem;
background: rgba(25, 25, 25, 0.9);
position: absolute;
width: 100%;
z-index: 999;
&__nav {
display: inline-block;
text-align: center;
font-size: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
padding: 0;
margin: 0;
}
&__navItem {
color: $white;
display: inline-block;
#include font-size(18);
padding: 0 4rem;
line-height: 5.8rem;
letter-spacing: 0.1rem;
position: relative;
cursor: default;
font-weight: 400;
text-transform: uppercase;
font-family: $lato;
&--calls {
&:hover ~ .navigation__wrapper .navItems .bgHover {
max-height: 35rem;
}
&:hover {
color: red;
}
}
}
I'm presuming you want the submenu to appear below the header nav. If so, then move your sub nav into the li tag for the corresponding header item, like so:
<li class="header__navItem header__navItem--calls">Calls
<ul class="navItems navItems--calls">
<li class="navItems__item">First</li>
<li class="navItems__item">Second</li>
<li class="navItems__item">Third</li>
<li class="navItems__item">Fourth</li>
</ul>
</li>
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;
I'm tring to make a simple drop-down menu, which would be triggered on hover event over some element and stay active as long as the cursor is over that element or is over the dropdown list.
Sample code:
HTML
<div class="header">
<div class="items">
<div class="item">
<span>Caption</span>
</div>
<ul class="items_hidden">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<input type="text">
CSS
.items {
float: right;
position: relative;
}
.item {
text-align: right;
}
.items_hidden {
display: none;
margin-top: 7px;
list-style: none;
z-index: 2000;
width: 80px;
border: 1px solid #f2f2f2;
text-align: left;
padding: 10px;
color: #333;
line-height: 30px;
border-bottom: 3px solid #f2f2f2;
}
input {
width: 100%;
}
JS
$(function() {
$('.items').on('mouseenter', function(e) {
$('.items_hidden').show();
});
$('.items').on('mouseleave', function(e) {
$('.items_hidden').hide();
});
});
I got that working, when the dropdown list is positioned relative, but the problem is once the list is displayed, it causes all following content to move down.
Here is an example: https://jsfiddle.net/2ya06aLo/
Another way would be to position the list absolute, so it wouldn't affect the content below. But in that case the list disappears as soons as I move the cursor out of 'Caption' (in contrast with the first fiddle).
Here is the second example https://jsfiddle.net/8L6ojqLm/
What would be a solution to make the list behave like in 1 and at the same time do not affect the rest of the content like in 2 ?
You can don't use JS
Example
.items {
float: right;
position: relative;
}
.item {
text-align: right;
padding: 10px;
}
.items_hidden {
position: absolute;
right: 0;
top: 20px;
display: none;
margin-top: 7px;
list-style: none;
z-index: 2000;
width: 80px;
border: 1px solid #f2f2f2;
text-align: left;
padding: 10px;
color: #333;
line-height: 30px;
border-bottom: 3px solid #f2f2f2;
}
input {
width: 100%;
}
.items:hover .items_hidden{
display: block;
}
<div class="header">
<div class="items">
<div class="item">
<span>Caption</span>
</div>
<ul class="items_hidden">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<input type="text">
Live JSFiddle - https://jsfiddle.net/grinmax_/8L6ojqLm/1/
Couldn't it be done via pure css?
https://www.w3schools.com/howto/howto_css_dropdown.asp
Maybe this would help.
.navigation {
width: 100%;
}
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu a {
}
.mainmenu a:hover {
background-color: #D90000;
}
.mainmenu li:hover .submenu {
display: block;
max-height: 400px;
}
.submenu{
max-height: 400px;
}
.submenu a {
background-color: #FF4D4D;
}
.submenu a:hover {
background-color: #D90000;
}
.submenu{
overflow:hidden;
display:none;
}
<nav class="navigation"><!-- pocetak navigacije -->
<ul class="mainmenu">
<li>Link</li>
<li class="start">Link
<ul class="submenu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Home</li>
</ul>
</nav>
To take up the comment of CBroe: The problem seems to be the "gap" between the and the element. To remove it you could either
give the "item"-Element a height so that it "reaches down" to the ul-element or
or remove the margin-top of the ul-element
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>