I am new for web development and I was wondering if you guys could direct me to the appropriate keywords I should use to make the following possible. So, there is a website where at the top of the page, there are list of Tabs( or keywords aligned horizontally) and if I hover around one of the keywords or tabs, something like a modal comes up(like slides down), which has another list of clickable words and when the cursor is no longer hovering around the tabs, the modal just disappears.
I have prepared a gif to show the details as my wording might be very confusing. So I was wondering if you could help me how to get started with to make the same website using ReactJs. Thank you for your help in advance.
The descriptive gif for the above problem
What you suggested can be achieved with simple CSS.
React will only be the tool for the rendering part.
Hopefully this snippet explains how simple the structure can be for you to achieve something similar to what you posted.
.navbar {
width: 100%;
}
.navbar:hover > .navbar-dropdown {
max-height: 200px;
}
.navbar-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: #ff0000;
}
.navbar-header p {
padding-left: 2em;
}
.navbar-dropdown {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: #00ff00;
max-height: 0;
overflow-y: hidden;
transition: all 0.3s ease;
}
<body>
<div class="navbar">
<div class="navbar-header">
<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
</div>
<div class="navbar-dropdown">
<ul>
<li>sub-item 1</li>
<li>sub-item 2</li>
<li>sub-item 3</li>
</ul>
<ul>
<li>sub-item 1</li>
<li>sub-item 2</li>
</ul>
<ul>
<li>sub-item 1</li>
<li>sub-item 2</li>
<li>sub-item 3</li>
<li>sub-item 4</li>
</ul>
</div>
</div>
</body>
Related
So, i've seen some other answers for similar stuff, but nothing that really helps or even works, I've tried to follow every step people said in other posts but nothing helped.
I wanna show a sub menu when I hover over it by removing the class hidden that it is defining its display to hiden, but I can´t make it using only css and, even though my js code recognizes that the mouse is hovering through it, it won´t budge.
So, here's my codes
$(".dropdown").hover(function() {
console.log('hover in');
$(".dropdown-content").removeClass("hidden");
console.log('hover out');
$(".dropdown-content").addClass("hidden");
})
.hidden {
display: none;
}
.menu-desktop {
position: absolute;
left: 70%;
list-style-type: none;
}
.menu-desktop ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu-desktop a {
display: inline;
float: left;
margin-left: 5px;
color: #bcbcbc;
text-align: center;
text-transform: uppercase;
text-decoration: none;
background-color: transparent;
border-radius: 0%;
border-color: transparent;
}
.menu-desktop a:hover {
color: #858181
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
}
.dropdown-content .shown {
position: absolute;
background-color: blue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar-itens">
<div class="logo">
<img src="assets/9mnb2mazqne71.png" alt="">
</div>
<!-- Navigation menu -->
<ul id="nav" class="menu-desktop">
<li>HOME</li>
<li class="dropdown">EMPRESA</li>
<ul id="submenu" class="dropdown-content hidden">
<li>submenu 1</li>
<li>submenu 1</li>
<li>submenu 1</li>
<li class="dropdown">submenu 1</li>
<ul id="submenu2" class="dropdown-content hidden">
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
</ul>
</ul>
<li>CLIENTES</li>
<li>CONTATO</li>
</ul>
</nav>
EDIT: Forgot to include my css, so, here it is!
You need to declare function inside hover() to handle hover in & out event:
$( ".dropdown" ).hover(
function() {
$(".dropdown-content").removeClass("hidden");
}, function() {
$(".dropdown-content").addClass("hidden");
}
);
The problems with your code
Main problem
You immediately add the class back after removing it, so you never see the dropdown content.
jQuery's .hover() expects two function arguments (first is run when mouse enters, second when mouse leaves).
direct-child-only problem
Second problem with your code is that it toggles the class on all submenus while the one you want is only the direct, immediate child of the list item being hovered. You can use
$(this).find(".dropdown-content").first()
to only affect the sub-ul you want. Alternatively, instead of .first(), you can also use .eq(0).
Invalid html problem
Please also note that ul can only have li children, so you need to wrap any sub-ul inside an li.
The solution to not use
$(".dropdown").hover(
function() {
$(this).find(".dropdown-content").first().removeClass("hidden");
},
function() {
$(this).find(".dropdown-content").eq(0).addClass("hidden");
}
);
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav" class="menu-desktop">
<li>HOME</li>
<li class="dropdown">EMPRESA
<ul id="submenu" class="dropdown-content hidden">
<li>submenu 1</li>
<li>submenu 1</li>
<li>submenu 1</li>
<li class="dropdown">submenu 1
<ul id="submenu2" class="dropdown-content hidden">
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
</ul>
</li>
</ul>
</li>
<li>CLIENTES</li>
<li>CONTATO</li>
</ul>
The solution to use is CSS only
That being said, you don't need any JavaScript for this, and you shouldn't be using JS for a CSS job:
.dropdown-content {
display: none;
}
.dropdown:hover > .dropdown-content {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav" class="menu-desktop">
<li>HOME</li>
<li class="dropdown">EMPRESA
<ul id="submenu" class="dropdown-content">
<li>submenu 1</li>
<li>submenu 1</li>
<li>submenu 1</li>
<li class="dropdown">submenu 1
<ul id="submenu2" class="dropdown-content">
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
</ul>
</li>
</ul>
</li>
<li>CLIENTES</li>
<li>CONTATO</li>
</ul>
So I have this list which I am trying to arrange.
I want to show the first two <li> elements in one line (inline) and other elements in separate rows.
I have tried adding display table > table-cell css properties to first two elements, but it just indents the other <li> elements to second row.
Is there a cleaner way of doing it?
<ul>
<li> Check All </li>
<li> Uncheck All </li>
<li> Option A </li>
<li> Option B </li>
<li> Option C </li>
<li> Option D </li>
<li> Option E </li>
<li> Option F </li>
<li> Option G </li>
</ul>
Apply a display: inline-block for the first two list-items, e.g.
li:nth-child(-n + 2) {
display: inline-block;
}
As a general solution: if you need to match the first k list-items, the selector has to be written in the form of li:nth-child(-n + k)
Codepen example
As a side note, if using a negative index is not intuitive to you, you can also revert the logic and apply that property to the elements that are not :nth-child(n + k + 1), like so
li:not(:nth-child(n + 3)) {
display: inline-block;
}
but in my opinion is less readable and the logic is quite convoluted.
Just make the first two li inline-block...
ul {
list-style-type: none;
}
li:first-child,
li:nth-child(2) {
display: inline-block;
}
<ul>
<li>Check All</li>
<li>Uncheck All</li>
<li>Option A</li>
<li>Option B</li>
<li>Option C</li>
<li>Option D</li>
<li>Option E</li>
<li>Option F</li>
<li>Option G</li>
</ul>
It may be useful for you to learn about :first-child and :nth-child(2) selectors in some instances. Given your example, though, I would assume that you simply didn't arrange the HTML in a semantic way. "Check" and "Uncheck" are actions...not list items. See the snippet below for a more semantic version of your example.
.list {
display: block;
width: 400px;
margin: 0px auto;
}
.list-header {
text-align: center;
clear: both;
line-height: 50px;
background: grey;
padding: 0px 15px;
}
.list-buttons {
vertical-align: middle;
}
.list-ul {
display: block;
margin: 0px;
padding: 0px;
background: lightgrey;
}
.list-ul-item {
display: block;
padding: 15px;
text-align: center;
}
<section class="list">
<header class="list-header">
<div class="list-buttons">
<button>Check All</button>
<button>Uncheck All</button>
</div>
</header>
<ul class="list-ul">
<li class="list-ul-item"> Option A </li>
<li class="list-ul-item"> Option B </li>
<li class="list-ul-item"> Option C </li>
<li class="list-ul-item"> Option D </li>
<li class="list-ul-item"> Option E </li>
<li class="list-ul-item"> Option F </li>
<li class="list-ul-item"> Option G </li>
</ul>
</section>
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 6 years ago.
I'm trying to delay hover out on the menu with css, I looked through several similars problem on this site but I can't make it work.
this is the base of my code https://jsfiddle.net/rja3spwm/. If someone can point me out some tips to make it work, please thanks.
<div id="menu">
<ul id="nav">
<li>SECTION 1
<ul>
<li>MENU 1</li>
<li>MENU 1</li>
<li>MENU 1</li>
<li>MENU 1</li>
</ul>
</li>
<li>SECTION 2
<ul>
<li>MENU 2</li>
<li>MENU 2</li>
<li>MENU 2</li>
<li>MENU 2</li>
</ul>
</li>
<li>SECTION 3
<ul>
<li>MENU 3</li>
<li>MENU 3</li>
<li>MENU 3</li>
<li>MENU 3</li>
</ul>
</li>
</ul>
</div>
You can use CSS3 animations I forked your fiddle
/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
position: absolute;
display: block;
width: 962px;
height: auto;
position: absolute;
margin: 40px 0 0 0;
background: #58D3F7 url(../img/menu-child.png) repeat-x;
z-index: 9999;
animation-name: example;
animation-duration: 250ms;
animation-iteration-count:1;
animation-direction: reverse;
}
#keyframes example {
25% {
display: block;
opacity:.75
}
50% {
display: block;
opacity:.50
}
75% {
display: block;
opacity:.25
}
100% {
display: block;
opacity:0
}
}
Edit Just saw you said hover out so I assume you want to delay when it closes. let me see...
There is no way to make delay by CSS, use JavaScript for that
so I am relatively new to coding and I am trying to make a multilevel dropdown menu, that when opened shows the links for the first level but doesn't show the second level links until clicked.
I started with a fork from codepen and have the navigation built, but I do not know what script to add to close the secondary links.
// open mobile menu
$('.js-toggle-menu').click(function(e){
e.preventDefault();
$('.mobile-header-nav').slideToggle();
$(this).toggleClass('open');
});
$('.sub-toggle').click(function(e){
e.preventDefault();
$('.subnav1').slideToggle();
$(this).toggleClass('open');
});
$('.sub-toggle2').click(function(e){
e.preventDefault();
$('.subnav2').slideToggle();
});
$('.sub-toggle3').click(function(e){
e.preventDefault();
$('.subnav3').slideToggle();
});
* {
box-sizing: border-box;
}
#media (min-width: 768px) {
.mobile-nav-wrap {
/* display: none; */
}
}
.mobile-header-nav {
background-color: #222222;
display: none;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100px;
width: 100%;
}
.mobile-header-nav li {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-header-nav li a {
color: white;
display: block;
padding: 15px 15px;
text-align: left;
text-decoration: none;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.mobile-header-nav li a:hover {
background-color: #2f2f2f;
}
a.mobile-menu-toggle {
padding-left: 50px;
color: #52575f;
text-decoration: none;
background: #eeeff0;
font-size: 3em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header>
<nav class="mobile-nav-wrap" role="navigation">
<ul class="mobile-header-nav">
<li>
Overview
<ul class="subnav1">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle2" href="#">Resources</a>
<ul class="subnav2">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle3" href="#">Service</a>
<ul class="subnav3">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
</ul>
</nav>
<a class="mobile-menu-toggle js-toggle-menu" href="#">
Get Started
</a>
</header>
The codepen that I am working on can be found here:
Codepen Link
Any advice is welcome
You can just add some CSS to hide the sub nav initially, like this:
.subnav1, .subnav2, .subnav3 {
display: none;
}
You may want to also change the classes so they are a little more generic, like just use a class of subnav and sub-toggle instead of subnav1, sub-toggle2, etc. Then you can have just one CSS rule and one event handler regardless of how many menu items you add. So your CSS for hiding the sub nav would just be:
.subnav {
display: none;
}
And your javascript to toggle all of the menu items is reduced to just:
$('.sub-toggle').click(function(e){
$(this).next('.subnav').slideToggle();
$(this).toggleClass('open');
});
I updated your code pen with an example here.
You may try this. The changes are only done to js logic.
Also, I'm not sure why you have e.preventDefault(). You only need it if you are trying to avoid submit a form. So I took them out.
<header>
<nav class="mobile-nav-wrap" role="navigation">
<ul class="mobile-header-nav">
<li>
Overview
<ul class="subnav">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle" href="#">Resources</a>
<ul class="subnav">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle" href="#">Service</a>
<ul class="subnav">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
</ul>
</nav>
<a class="mobile-menu-toggle js-toggle-menu" href="#">
Get Started
</a>
</header>
<script>
$().ready(function()
{
$('.js-toggle-menu').click(function(e){
$('.sub-toggle').slideToggle();
$('.sub-toggle').each(function()
{
$(this).closest('li').find('.subnav').hide();
});
});
$('.sub-toggle').click(function(){
$(this).closest('li').find('.subnav').slideToggle();
});
});
</script>
I have a main menu with few sub pages that I want to show in a drop down menu.
I am using CSS to hide all the "ul" that are inside the Main Menu "ul", and show the nested "ul" when hover over the main "ul (li's)"
It is not really working, I simply want to make it that when you hover over a tab from the main menu the sub menu just inside it will show as a drop down menu, and then when you hover out of the drop down menu or hover over anther main menu tab the drop down menu will go away.
Any ideas of how I would do that?
Here is the HTML:
<div id="headerLogo">
<?php include ("assets/templates/header-logo.inc"); ?>
</div>
<nav><ul id="mainMenu"><!--Main Menu-->
<li>Home
<ul>
<li>Intro 1</li>
<li>Intro 2</li>
<li>Intro 3</li>
<li>Vision</li>
<li>Contacts</li>
<li>Staff</li>
<li>Use</li><li>
<li>Crisis</li>
</ul></li>
<li>Basics
<ul>
<li>Definition 1</li>
<li>Definition 2</li>
<li>Definition 3</li>
<li>Assess 1</li>
<li>Assess 2</li>
<li>Assess 3</li>
</ul></li>
<li>Need
<ul>
<li>World 1</li>
<li>World 2</li>
<li>World 3</li>
<li>Polar 1</li>
<li>Polar 2</li>
<li>Polar 3</li>
<li>National 1</li>
<li>National 2</li>
<li>National 3</li>
<li>Alaska 1</li>
<li>Alaska 2</li>
<li>Alaska 3</li>
<li>Alaska 4</li>
<li>Fairbanks</li>
</ul></li>
<li>Models
<ul>
<li>Durkheim</li>
<li>Joiner</li>
<li>NAMI</li>
<li>Mental</li>
<li>Church</li>
<li>Menninger</li>
<li>Weaver/Wright</li>
</ul></li>
<li>Approach
<ul>
<li>Trees 1</li>
<li>Tress 2</li>
<li>Goals 1</li>
<li>Goals 2</li>
<li>Training 1</li>
<li>Training 2</li>
<li>Gas 1</li>
<li>Gas 2</li>
<li>Boat 1</li>
<li>Boat 2</li>
</ul></li>
<li>Library
<ul>
<li>Stories</li>
<li>Books</li>
<li>Plays</li>
<li>Epics</li>
<li>Movies</li>
<li>Articles</li>
</ul></li>
<li>Web
<ul>
<li>Arctic</li>
<li>National</li>
<li>Supports</li>
<li>Reference</li>
</ul></li>
</ul></nav>
</div>
</header>
CSS:
/*Main Menu*/#mainMenu {
margin-top: 10px;
float: right;
}
ul#mainMenu ul {
display: none;
}
ul#mainMenu li:hover > ul {
display: block;
background-color: #F7F7F7;
width: 145px;
position: absolute; top: 100%;
}
ul#mainMenu li ul li {
float: none;
width: 100%;
}
#mainMenu li {
float: left;
}
#mainMenu a {
color: #595959;
width: 100%;
padding: 10px 15px;
margin-left: 5px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: background 0.1s linear;
-moz-transition: background 0.1s linear;
-ms-transition: background 0.1s linear;
-o-transition: background 0.1s linear;
transition: background 0.1s linear;
}
#mainMenu a:hover {
color: #4E6C98;
}
#mainMenu a.active {
color: #ffffff;
background-color: #4E6C98;
cursor: default;
}
Try adding position: relative; on #mainMenu li. Your dropdowns are positioned absolutely but have nothing to be relative to.