Dropdown menu for webpage - javascript

I created a simple website for practice purposes. I'm trying to create a dropdown menu for the Items in navigation but when I ran the website, it doesn't show anything. All files are saved in desktop.
Here is the code for my html(main.html) with jquery(jquery-1.3.2.min.js):
function mainmenu() {
$(" #nav ul ").css({
display: "none"
});
$(" #nav li ").hover(function() {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(400);
}, function() {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function() {
mainmenu();
});
body {
font-family: 'lucida grande', Tahoma, Verdana, Arial, sans-serif;
background-color: #e9e9e9;
}
#wrapper {
width: 1080px;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
background-color: #fff;
}
#banner {
height: 200px;
border: 3px solid #E3E3E3;
background-color: blue;
background-repeat: no-repeat;
background-size: cover;
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
background-color: red;
text-shadow: 0.1em 0.1em #333;
}
#nav {
list-style: none;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li ul li {
background-color: green;
background-repeat: no-repeat;
background-size: cover;
border: 3px solid #E3E3E3;
padding-left: 10px;
}
#nav a:link,
#nav a:active,
#nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#content_area {
float: left;
width: 750px;
height: 382px;
margin: 20px 0px 20px 5px;
padding: 10px;
border: 3px solid #E3E3E3;
}
#sidebar {
float: right;
width: 250px;
height: 402px;
margin: 20px 10px 20px 10px;
border: 3px solid #E3E3E3;
background-color: yellow;
}
#footer {
clear: both;
width: auto;
height: 40px;
margin-top: 20px;
background-color: blue;
text-shadow: 0.1em 0.1em #333;
color: #fff;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation">
<ul id="nav">
<li>Home
</li>
<li>Items
</li>
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
<li>Shop
</li>
<li>About
</li>
</ul>
</div>
<div id="content_area">
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>All rights reserved</p>
</div>
</div>

Yes the error is inside your code. You are trying to target the first ul inside the li but in your code you the ul is standalone/ outside the li.
<li>Items
</li>
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
see the ul is out side the Items li, put it inside and it will work like this.
<li>Items
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
</li>
You were putting a ul inside a ul directly.

The problem is not with your jQuery but with the HTML, you should wrap your dropdown menu (ul) with items (li)
function mainmenu() {
$(" #nav ul ").css({
display: "none"
});
$(" #nav li ").hover(function() {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(400);
}, function() {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function() {
mainmenu();
});
body {
font-family: 'lucida grande', Tahoma, Verdana, Arial, sans-serif;
background-color: #e9e9e9;
}
#wrapper {
width: 1080px;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
background-color: #fff;
}
#banner {
height: 200px;
border: 3px solid #E3E3E3;
background-color: blue;
background-repeat: no-repeat;
background-size: cover;
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
background-color: red;
text-shadow: 0.1em 0.1em #333;
}
#nav {
list-style: none;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li ul li {
background-color: green;
background-repeat: no-repeat;
background-size: cover;
border: 3px solid #E3E3E3;
padding-left: 10px;
}
#nav a:link,
#nav a:active,
#nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#content_area {
float: left;
width: 750px;
height: 382px;
margin: 20px 0px 20px 5px;
padding: 10px;
border: 3px solid #E3E3E3;
}
#sidebar {
float: right;
width: 250px;
height: 402px;
margin: 20px 10px 20px 10px;
border: 3px solid #E3E3E3;
background-color: yellow;
}
#footer {
clear: both;
width: auto;
height: 40px;
margin-top: 20px;
background-color: blue;
text-shadow: 0.1em 0.1em #333;
color: #fff;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation">
<ul id="nav">
<li>Home
</li>
<li>Items
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
</li>
<li>Shop
</li>
<li>About
</li>
</ul>
</div>
<div id="content_area">
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>All rights reserved</p>
</div>
</div>

Related

How to close the responsive navigation bar automatically after clicking on a link in the menu (using JavaScript)?

Below is the HTML, CSS and JavaScript codes that I have used to create the navigation bar of my website;
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0"
}
function hideMenu(){
navLinks.style.right = "-700px"
}
header{
background-color: black;
background-position: center;
background-size: cover;
height: 12vh;
width: 100%;
z-index: 1;
position: fixed;
}
.logo img{
float: left;
width: 70px;
margin-top: 10px;
}
.main-nav{
float: right;
margin-top: 30px;
list-style: none;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
padding: 5px 10px;
font-size: 15px;
font-weight: bold;
font-family: sans-serif;
text-decoration: none;
}
.main-nav li.active a{
border: 2px solid #a40000;
background-color: black;
}
.main-nav li a:hover{
border: 2px solid #a40000;
background-color: black;
}
<header>
<div class="logo">
<img src="logokm.png" alt="logokm">
<ul class="main-nav" id="navLinks">
<img class="hm" src="close1.png" alt="c" onclick="hideMenu()">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SKILLS</li>
<li>SERVICES</li>
<li>PROJECTS</li>
<li>CONTACT ME</li>
</ul>
<img class="hm1" src="open1.png" alt="o" onclick="showMenu()">
</div>
</header>

Create accordions into accordions

I have some requests because i have trouble with accordion and panel. I would like that my accordion contain other accordion. But i have have some trouble with the size of my mainpage because the div did not align under each other. Otherwise, in my job we can't use js so i would like code only in html and css.
I post my code :
HTML :
<button class = "accordion">Fat Section</button>
<div class = "panel">
<button class = "accordion"</button>
<div class='panel'>
<p>Statut:</p>
</div>
</div>
button.accordion {
background-color:#ADD8E6;
color: #444;
cursor: pointer;
padding: 18px;
width: 50%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
display: block;}
button.accordion.active, button.accordion:hover {
background-color: #B0E0E6;
div.panel {
padding: 0 18 px;
width: 100%;
height: 100%;
background-color:white;
transition: max-height 0.2s ease-out;
transform: translateY(-50%);
display:none;}
div.accordion
{
position: relative;
display: block;
}
button.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
margin-left: 85%;}
button.accordion.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
Thanks for your help !
$( document ).ready(function() {
$("ul.trackAccordion").accordion({
collapsible: true,
active: false,
heightStyle: "content"
});
});
input:focus { outline: none; }
body,html{
width: 100%;
height: 100%;
background: url('http://subtlepatterns.com/patterns/crossword.png');
background-repeat: repeat;
}
a {
color: white;
outline: none !important;
}
a:-webkit-any-link{
text-decoration: none !important;
}
ul{
list-style-type: none;
-webkit-padding-start: 0 !important;
}
.trackAccordion{
margin: 50px auto;
background-color: #2d2d2d;
height: 790px;
width: 296px;
border-radius: 5px;
color: white;
font-family: 'Helvetica';
font-weight: bold;
padding-top: 30px;
font-size: 1em;
text-align: center;
overflow: hidden;
}
ul.trackAccordion > li{
color: white;
padding-bottom: 20px;
padding-top: 20px;
border-bottom: thick solid #464646;
}
ul.tracks > li{
padding: 20px;
background-color: #444444;
margin-bottom: 2px;
margin-left: -10px;
text-align: left;
font-weight: normal;
font-size: 14px;
}
ul#cert_Track > li{
border-left:thick solid #01cfe7;
border-left-width:20px;
}
ul#kids_Track > li{
border-left:thick solid #aa2e54;
border-left-width:20px;
}
ul#more_Track > li{
border-left:thick solid #618daa;
border-left-width:20px;
}
.proTrack{
padding-top: 0 !important;
}
.accoTrack{
margin-bottom: 30px;
}
.blueBorder{
background: #00d0e7;
position: relative;
left: -58px;
padding: 20px 13px 19px 7px;
}
.nestedElemAccor{
margin-top: -20px;
}
.nestedElems{
border-bottom: none;
}
.begNestElem{
background-color: #0bddf0;
padding: 13px 105px 13px 105px
}
.intNestElem{
background-color: #08a2b0;
padding: 13px 105px 13px 105px
}
.advNestElem{
background-color: #067983;
padding: 13px 105px 13px 105px
}
.trackAccordion {
margin: 50px auto;
background-color: #2d2d2d;
height: 790px; //Check by commenting the height.
width: 296px;
border-radius: 5px;
color: white;
font-family: 'Helvetica';
font-weight: bold;
padding-top: 30px;
font-size: 1em;
text-align: center;
overflow: hidden;
}
<body>
<ul class = "trackAccordion">
INDIVIDUAL CLASSES
<ul class = "course_beginner trackAccordion nestedElemAccor">
<li class = "nestedElems">
BEGINNER
<ul class="tracks">
<li>Intro to DJing (DJ 101)</li>
<li>Intensive Beginners (DJ INT)</li>
<li>Intensive Beginners (DJ INT)</li>
</ul>
</li>
<li class = "nestedElems">
INTERMEDIATE
<ul class="tracks">
<li>Mixing (M 202)</li>
<li>Scratching (S 202)</li>
<li>Music Production II (MP 202)</li>
</ul>
</li>
<li class = "nestedElems">
ADVANCED
<ul class="tracks">
<li>Mixing III (M 303)</li>
<li>Mixing IV (M 404)</li>
<li>Mixing V (M 505)</li>
<li>Scratching III (S 303) </li>
<li>Battle DJing (S 404)</li>
<li>Music Production III (MP 303)</li>
<li>Music Production IV (MP 404)</li>
<li>Master Class - Team Routines</li>
</ul>
</li>
</ul>
</li> <!-- END element which hold Individual class in accordian -->
MORE OPTIONS
<ul class = "tracks" id = "more_Track">
<li>Private Lessons</li>
<li>Group Events</li>
<li>Workshops</li>
</ul>
</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</body>
Its different from your code but you can find a suggestions from it

JavaScript + CSS Single Collapsible Vertical Menu

Everybody, I have been learning and trying to make a collapsible vertical menu using JavaScript and CSS.
What should I do so that when I expand both menus and I click again on user 1, the user 2 will be hidden?
Here's the coding:
body {
background:#ffffff;
margin: 0 auto;
}
#nav{
width: 200px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana;
color: #999999;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}
li ul {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
position: relative;
display:none;
}
ul li a {
display:block;
text-decoration: none;
color: #000000;
background: #8CDD81;
line-height:2em;
height:2em;
padding:2px 2px
}
li li a {
background:#D7DBDD
}
li:hover li a, li.over li a {
background-color: #D7DBDD;
}
li a:hover,
li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {
color: #000000;
background-color: #F4D03F ;
}
header {
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info {
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a{
color: #074E8C;
}
.scrollbar {
margin-left: 30px;
float: left;
height: 200px;
width: 210px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar
{
width: 10px;
background-color: #cccccc;
}
#style-4::-webkit-scrollbar-thumb
{
background-color: #9fa6ad;
border: 2px solid #9fa6ad;
}
li ul li {}
li.on ul {
display:block
}
li.off ul {
display:none
}
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onclick=function() {
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
<body>
<id="wrapper">
<div class="scrollbar" id="style-4" class="force-overflow">
<ul id="nav">
<li><strong>MENU</strong></li>
<li><strong>User 1 ></strong>
<ul>
<li>Name </li>
<li>Age</li>
</ul>
</li>
<li><strong>User 2 ></strong>
<ul>
<li>Name</li>
<li>Age</li>
</ul>
</li>
</div>
</div>
</ul>
</body>
off previously selected li by removing on class from other element
if(document.getElementsByClassName("on").length>0)
document.getElementsByClassName("on")[0].className = "off";
body {
background: #ffffff;
margin: 0 auto;
}
#nav {
width: 200px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana;
color: #999999;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}
li ul {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
position: relative;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #000000;
background: #8CDD81;
line-height: 2em;
height: 2em;
padding: 2px 2px
}
li li a {
background: #D7DBDD
}
li:hover li a,
li.over li a {
background-color: #D7DBDD;
}
li a:hover,
li:hover a,
li.over a,
li:hover li a:hover,
li.over li a:hover {
color: #000000;
background-color: #F4D03F;
}
header {
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info {
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a {
color: #074E8C;
}
.scrollbar {
margin-left: 30px;
float: left;
height: 200px;
width: 210px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar {
width: 10px;
background-color: #cccccc;
}
#style-4::-webkit-scrollbar-thumb {
background-color: #9fa6ad;
border: 2px solid #9fa6ad;
}
li ul li {} li.on ul {
display: block
}
li.off ul {
display: none
}
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i = 0; i < navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onclick = function() {
if(document.getElementsByClassName("on").length>0)
document.getElementsByClassName("on")[0].className = "off";
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload = startList;
//--><!]]>
</script>
<body>
<id="wrapper">
<div class="scrollbar" id="style-4" class="force-overflow">
<ul id="nav">
<li><strong>MENU</strong>
</li>
<li><strong>User 1 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
<li><strong>User 2 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
</div>
</div>
</ul>
</body>
You can use jQuery to reduce your coding efforts.
Following is the only code you need.
body {
background: #ffffff;
margin: 0 auto;
}
#nav {
width: 200px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana;
color: #999999;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}
li ul {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
position: relative;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #000000;
background: #8CDD81;
line-height: 2em;
height: 2em;
padding: 2px 2px
}
li li a {
background: #D7DBDD
}
li:hover li a,
li.over li a {
background-color: #D7DBDD;
}
li a:hover,
li:hover a,
li.over a,
li:hover li a:hover,
li.over li a:hover {
color: #000000;
background-color: #F4D03F;
}
header {
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info {
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a {
color: #074E8C;
}
.scrollbar {
margin-left: 30px;
float: left;
height: 200px;
width: 210px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar {
width: 10px;
background-color: #cccccc;
}
#style-4::-webkit-scrollbar-thumb {
background-color: #9fa6ad;
border: 2px solid #9fa6ad;
}
li ul li {} li.on ul {
display: block
}
li.off ul {
display: none
}
<script type="text/javascript" src='https://code.jquery.com/jquery-3.1.1.min.js'> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav li").click(function(){
currentClass = $(this).attr('class');
$("#nav li").removeClass('on').addClass('off');
newClass = (currentClass == 'on' ? 'off' : 'on');
$(this).removeClass('off').addClass(newClass);
});
});
</script>
<body>
<id="wrapper">
<div class="scrollbar" id="style-4" class="force-overflow">
<ul id="nav">
<li class=''><strong>MENU</strong>
</li>
<li><strong>User 1 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
<li><strong>User 2 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
<li><strong>User 3 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
</div>
</div>
</ul>
</body>
I made this nav menu for reference. It's responsive to screen size too.
var btn = document.getElementById('navBtn');
var ul = document.getElementById('navUl');
btn.addEventListener("click", function(){
ul.classList.toggle("active");
});
#bar {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background-color: #333;
}
nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
font-family: Verdana;
text-decoration: none;
}
nav ul li:hover {
background-color: #666;
}
#navBtn {
display: none;
}
#media screen and (max-width: 500px) {
nav ul li,
nav ul li a {
text-align: center;
display: block;
}
nav ul {
display: none;
}
nav ul.active {
display: block;
}
#navBtn {
display: block;
width: 60px;
height: 60px;
border: 1px solid #fff;
background-color: #333;
color: #fff;
}
}
<div id="bar">
<button id="navBtn">☰</button>
<nav>
<ul id="navUl">
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</nav>
</div>
As a side note, you can also technically do this with pure CSS (though, that's a bit tricky; you'd use a checkbox w/ labels for it).
Also, I saw your className = code, so I wanted to specifically point out the Element.classList bit in my code. It comes with .add(), .remove(), .toggle() and other useful methods.

HTML/CSS Jquery hover not showing up

I am new to Jquery and
I am trying to make a dropdown on my navigation using simple Jquery hover effect, and I think I am using wrong selector on Jquery.
I would like to see the dropdown and be able to navigate when i hover over 'What's New'
Any help would be awesome. Thanks,
See ATTACHED IMG
$(document).ready(function () {
$("li .nav-level-1").hover(
function () {
$('.nav-level-2').slideDown('200');
},
function () {
$('.nav-level-2').slideUp('200');
}
);
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
You should use a nested ul for your dropdown menu. You don't need jQuery at all for this. It can all be done with CSS. Take a look at this simple hover effect under the Products tab.
Codepen
HTML
<header class="navbar">
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Cars
<ul>
<li>Ford</li>
<li>Chevy</li>
<li>Toyota</li>
</ul>
</li>
<li>Trucks</li>
<li>Vans</li>
<li>SUVs</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</header>
CSS
header {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
background-color: #2EBAE8;
}
.container {
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
ul {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
width: 200px;
background-color: #046382;
display: none;
position: absolute;
top: 100%;
left: 0;
float: none;
}
ul ul ul {
top: 0;
left: 100%;
}
ul ul li {
float: none;
}
ul li {
float: left;
padding: 0 10px;
position: relative;
}
ul li:hover > ul {
display: block;
}
ul a {
display: block;
text-decoration: none;
color: white;
line-height: 50px;
transition: color 0.5s;
}
ul a:hover {
color: #E82E82;
}
Your submenu is hidden with visibility: hidden style.
I also separated the handled so that the menu doesn't hide while you're hovering it, and added finish() so that we're not queueing animations.
But yeah, like ncox85 said you should do this with css.
$(document).ready(function () {
$('.nav-level-2').hide();
$("li .nav-level-1").mouseenter(
function () {
$('.nav-level-2').finish().slideDown('200');
}
);
$("li .nav-level-2").mouseleave(
function () {
$('.nav-level-2').finish().slideUp('200');
});
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
Just use display:none instead of visibility:hidden on class .nav-level-2
If any of you are wondering, I got a good result from just using html/css, got rid of jquery.
Maybe I will use jquery another time. fun lesson for myself and those of you out there. Thanks guys
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display: block;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

How to create an expandable <li> element in html

So I have this competetion about creating a website and I want to create a list element which is expandable when the user for example sends the mouse over it just like in the website below and the options pop out
http://www.howtogeek.com/
This is the HTML
<ul>
<li>Artikuj</li>
<li>Na ndiqni</li>
<li>Rreth nesh</li>
</ul>
And this is the CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid black;
background-color: black;
height: 37px;
border-radius: 20px;
}
li {
float: left;
font-family: 'Times New Roman', Times, serif
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: black
}
li a:hover:not(.active) {
background-color: gray;
}
li a.active {
color: white;
background-color: black;
}
Pure CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid black;
background-color: black;
height: 37px;
border-radius: 20px;
}
li {
float: left;
font-family: 'Times New Roman', Times, serif
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: black
}
li a:hover:not(.active) {
background-color: gray;
}
li a.active {
color: white;
background-color: black;
}
li ul {
display: none;
position: absolute;
}
li:hover ul {
display: block;
}
<ul>
<li>Artikuj
<ul>
<li>Artikuj</li>
<li>Na ndiqni</li>
<li>Rreth nesh</li>
</ul>
</li>
<li>Na ndiqni</li>
<li>Rreth nesh</li>
</ul>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
li .menuall{
width: 600px;
}
.menuall_list{
float: left;
width: 200px;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
HTML:
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li class="dropdown">
Artikuj
<div class="dropdown-content">
<div class="menuall">
<div class="menuall_list">
Link 1
Link 2
Link 3
</div>
<div class="menuall_list">
Link 1
Link 2
Link 3
</div>
<div class="menuall_list">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</li>
</ul>
This code is for as like www.howtogeek.com menu. Now you change the color or shape as per your design.

Categories

Resources