I want to add a dropdown option(submenu) to existing menu bar.
Here is my CSS and HTML code.
I found a lot of drop down menus.
But it is very important to me that, I just want to add the new function to my existing menu, without much changes to the whole menu.
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: right;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
<div class="topnav" id="myTopnav">
Speed Dial
Speed Dial
I just tried to meet your requirement by modifying your own code.
Style/CSS corrections are left for you.
Try it out.
Screenshot
Code
.topnav {
background-color: #333;
height: 50px;
}
.topnav li {
float: left;
display: block;
text-align: right;
padding: 14px 16px;
font-size: 17px;
background: transparent;
width: 150px;
}
.topnav li a{
padding: 14px 16px;
color: #f2f2f2;
text-decoration: none;
}
.topnav li a:hover{
background-color: #ddd;
color: black;
}
.topnav li.active {
background-color: #4CAF50;
color: white;
}
.subnav {
background-color: blue;
overflow: hidden;
display : none;
width: 200px;
margin-top: 15px;
padding: 0px;
}
.subnav li {
float: left;
display: block;
text-align: right;
padding: 14px 16px;
font-size: 17px;
}
.subnav li a {
color: #f2f2f2;
text-decoration: none;
}
.subnav li:hover {
background-color: #ddd;
color: black;
}
.subnav li.active {
background-color: #4CAF50;
color: white;
}
.topnav li:hover .subnav{
display : block;
}
<ul class="topnav" id="myTopnav">
<li>
Main 1
</li>
<li>
Main 2
</li>
<li>
Main 3 with sub
<ul class="subnav">
<li>
sub 1
</li>
<li>
sub 2
</li>
</ul>
</li>
</ul>
Related
Whenever I click the link of navbar on mobile view, its overriding with content and ul is not collapsing. I want to hide my navbar (ul) when links in the navbar are clicked. How to fix this issue? Please help.
Here’s the code:
<nav>
<div class="navbar" >
<input type="checkbox" name="check" id="check">
<label for="check" class="checkbtn">
<i class="fa fa-bars"></i>
</label>
<label class ="logo">B</label>
<ul>
<li><a class="active" href="#Home" >Home</a></li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</nav>
/* css*/
nav{
background-color: rebeccapurple;
height: 57px;
width: 100%;
position:fixed;
}
label.logo{
color: white;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 30px;
font-weight: bold;
line-height: 60px;
padding: 0px 11px;
border: 4px solid white;
border-radius: 11px;
margin-left: 39px;
opacity: 0.8;
}
nav ul{
float: right;
margin-right: 94px;
}
nav ul li{
display:inline-block;
line-height: 60px;
}
nav ul li a{
color: white;
font-size: 15px;
font-size: bolder;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
padding: 7px 13px;
}
a.active, nav ul li a:hover {
background-color: rgb(199, 130, 255);
border-radius: 3px;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 60px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
/*for navbar responsiveness*/
#media (max-width: 952px){
label.logo{
font-size: 30px;
}
nav ul li a{
font-size: 13px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #1f1d27;
top: 61px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 30px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover, a.active{
background: none;
background-color: rebeccapurple;
border-radius: 2px;
}
#check:checked ~ ul{
left: 0;
}
nav ul li a:active {
left: 0;
transition: all .5s;
}
}
Whenever I click the link of navbar on mobile view, its overriding with content and ul is not collapsing. I want to hide my navbar (ul) when links in the navbar are clicked. How to fix this issue? Please help.
you can add the script for whenever you click the navbar, and adding the class style to the ul
check this video for the evidence :D
video
const navtabs = document.querySelectorAll('a')
const ul = document.querySelector('ul')
for( let i = 0; i < navtabs.length;i++){
navtabs[i].addEventListener('click', function(){
ul.classList.add('clicked')
})
}
nav {
background-color: rebeccapurple;
height: 57px;
width: 100%;
position: fixed;
}
label.logo {
color: white;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-size: 30px;
font-weight: bold;
line-height: 60px;
padding: 0px 11px;
border: 4px solid white;
border-radius: 11px;
margin-left: 39px;
opacity: 0.8;
}
nav ul {
float: right;
margin-right: 94px;
}
nav ul li {
display: inline-block;
line-height: 60px;
}
nav ul li a {
color: white;
font-size: 15px;
font-size: bolder;
text-transform: uppercase;
font-family: "Open Sans", sans-serif;
padding: 7px 13px;
}
a.active,
nav ul li a:hover {
background-color: rgb(199, 130, 255);
border-radius: 3px;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 60px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/*for navbar responsiveness*/
#media (max-width: 952px) {
label.logo {
font-size: 30px;
}
nav ul li a {
font-size: 13px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
/* idk in my code this possition is not working,and then i comment this style */
/* position: fixed; */
width: 100%;
height: 100vh;
background: #1f1d27;
top: 61px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 30px 0;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
a:hover,
a.active {
background: none;
background-color: rebeccapurple;
border-radius: 2px;
}
#check:checked ~ ul {
left: 0;
}
nav ul li a:active {
left: 0;
transition: all 0.5s;
}
/* you can create new style for to add in the ul */
.clicked{
opacity: 0;
}
}
<nav>
<div class="navbar">
<input type="checkbox" name="check" id="check" />
<label for="check" class="checkbtn">
<i class="fa fa-bars"></i>
</label>
<label class="logo">B</label>
<ul>
<li><a class="active" href="#Home">Home</a></li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</nav>
I have added a basic clickable dropdown button to my menu, but it can't be customize or even show the changes on the live website. And the dropdown content will not appear on separate line:
Here is a screenshot of what i am referring too:
https://imgur.com/hzKm7WI
I have searched google related to my problem, but everything I've searched is not working. Am I doing something wrong
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.button')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
body {
margin: 0;
padding: 0;
margin-top: 130px;
overflow-x: hidden;
}
.nav-menu a img {
float: left;
margin-left: 10px;
}
.nav-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.9);
margin-top: -130px;
}
.nav-menu li {
float: left;
}
.nav-menu li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-menu li a:hover,
.dropdown:hover .dropbtn {
border-top: 2px solid #ff0000;
}
.nav-menu li.dropdown {
display: inline-block;
}
.nav-menu .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.nav-menu .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.nav-menu .dropdown-content a:hover {
background-color: #ff0000;
color: #fff;
}
.nav-menu .dropdown:hover .dropdown-content {
display: block;
}
.nav-menu li.social {
float: right;
}
li.navbar {
overflow: hidden;
background-color: transparent;
font-family: Arial, Helvetica, sans-serif;
float: right;
padding-right: 100px;
}
li.navbar a {
float: left;
font-size: 16px;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-menu {
float: left;
overflow: hidden;
}
.dropdown-menu .button {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
li.navbar a:hover,
.dropdown-menu:hover .button,
.button:focus {
background-color: red;
}
.dropdown-menu-content {
color: #fff;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-menu-content a {
float: left;
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.navbar-nav .open .dropdown-menu .button {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Title Here</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="CSS/style.css?v=12345">
</head>
<body>
<div class="nav-menu">
<ul>
<img src="img/logo.jpg" style="width:50px">
<li class="dropdown">
Games
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="dropdown">
Crews
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Jobs</li>
<li>Photos</li>
<li>Videos</li>
<li>Events</li>
<li>News</li>
<li class="navbar">
<div class="dropdown-menu">
<button class="button" onclick="myFunction()">
<i class="fas fa-user"></i>
</button>
<div class="dropdown-menu-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
<li class="social">
Sign In
Sign Up
<i class="fas fa-search"></i>
</li>
</div>
</li>
</ul>
Have you tried writing css with more specificity like
.navbar-nav .open .dropdown-menu .button {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
However if what you meant was it gets applied locally and not when deployed on to live site it could be due to css caching by browser in which case you can use a cache busting strategy like appending a query string(unique) at the end of url when linking the css eg
<link rel="stylesheet" type="text/css" href="./path/to/cssfile.css?v=12345">.
i've tried your code & there should be no problem.
I think its because your style was overridden by another class. You can check it with browser inspector.
In that case you should prioritize yous css by using !important like this
.dropdown-menu-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block !important;
text-align: left;
}
you can find more info about css specificity here
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
when I hover around submenu , then when dragging cursor over submenu and hovering over the submenu disappers and only sometimes appear when I select any other nav menu and hover there but it only works sometimes.
Here is my code
html
{ height: 100%;}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #FFF;
color: #555;}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
#menubar
{ width: 880px;
height: 46px;}
ul#menu
{ float: right;
margin: 0;}
ul#menu li
{ float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;}
ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;}
ul#menu li.selected a
{ height: 20px;
padding: 6px 35px 5px 28px;}
ul#menu li.selected
{ margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;}
ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;}
ul#menu li a:hover
{ color: #E4EC04;}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 35px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu" >
<li ><a href="#" >Home</a></li>
<li ><a ref="#" >Contact Us</a></li>
<li >
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
How can I solve this ..
Ay help is appreciated. I tried but I failed and Have no idea how to solve this.
Thanks in advance.
It's because there is a space between the "Dropdown" menu and the dropdown list. Instead of hard coding the margin in px use a percentage. I also recommend using top instead of margin-top. Replace .dropdown-content css with:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
top: 100%; //To move it up or down more you can use calc like: calc(100% + 1px) or calc(100% - 2px)
}
when you move the mouse from the dropdown menu toggle, into the submenu, you are briefly not hovering over the div due to the margin-top value of the submenu. If you really want that divide between the two add white top border (i.e. border-top: 2px solid white;).
Heres a JSFiddle
Change the CSS as follows:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
Change the HTML as follows:
<li class="dropdown">
<div>
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
The issue is simply a gap between li.dropdown and .dropdown-content. It is worth noting that when you move the cursor quickly from the dropdown button to the dropdown list, it does not disappear. However, doing that slowly vanishes the list.
The simplest solution I could think of here is to decrease the top margin of the dropdown list, while adding a top padding to the first list item to compensate for that lost margin (a top margin won't work here). So, your code for the dropdown menu would look like this:
#menubar {
width: 880px;
height: 46px;
}
ul#menu {
float: right;
margin: 0;
}
ul#menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
}
ul#menu li a {
font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;
}
ul#menu li.selected a {
height: 20px;
padding: 6px 35px 5px 28px;
}
ul#menu li.selected {
margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}
ul#menu li.selected a,
ul#menu li.selected a:hover {
background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;
}
ul#menu li a:hover {
color: #E4EC04;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:first-child {
padding-top:17px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu">
<li>Home</li>
<li><a ref="#">Contact Us</a></li>
<li>
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
My Web Designer is having trouble with his nav bar not displaying correctly. When hovering over a item with the dropdown-items class, a dropdown is supposed to appear with the items listed in the div. Instead, a block only appears with no items. The navbar is a React.JS component, and its being rendered in a parent container. I listed his html and css below.
Edit: Screenshot of the current result. It appears on hover but not under as it should in a list
Edit 2: It works in plain HTML w/ CSS but not React w/ CSS
html {
font-family: sans-serif;
}
/*div{
background:white;
}*/
/********* NavBar Section **********/
.navbar {
overflow: hidden;
background-color: #B597C3;
}
/* links inside the navigation bar */
.navbar li {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: .625em 5em;
text-decoration: none;
font-size: 17px;
}
/* color of links on hover */
.navbar a:hover {
color: #ffffff;
text-decoration: underline;
}
.navbar a.active {
text-decoration: underline;
}
/* Drop Down Items */
.dropdown-btn {
float: left;
font-size: 1.0625em;
color: white;
border: none;
cursor: pointer;
overflow: hidden;
}
.dropdown {
display: inline-block;
}
.dropdown-items {
position: absolute;
display: none;
margin: 0;
min-width: 10em;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-items a {
color: white;
padding: 12px 50px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-items {
display: block;
}
<div class="navbar">
<ul>
<li class="dropdown">
Clothes
<div class="dropdown-items">
Item
Item
Item
Item
</div>
</li>
<li>About</li>
<li>Policies</li>
<li>How To Rent</li>
<li>Contact</li>
</ul>
</div>
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.