I am trying to sort out creating a basic nav menu.
I created a nav menu with :hover properties for the choices in the menu.
However, I have the current page, set as an active, and I do not want the active page on the menu bar to highlight like the other choices.
I have tried every which way to get it to work with no success. Please help!
/* Main Navigation Menu */
ul#main-menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #336699;
}
li {
float: right;
}
li a, .menu-drop-btn {
display: inline-block;
color: white;
padding: 15px;
text-decoration: none;
}
/* li a:hover, .menu-drop-btn:hover .menu-drop-btn{
background-color: #6699cc;
cursor: pointer;
} */
li a:hover, :not(.menuactive #active):hover {
background-color: #6699cc;
cursor: pointer;
}
/* #active:hover {
background-color: #336600;
cursor: pointer;
} */
li.menu-drop-btn {
display: inline-block;
}
.menu-drop-content {
display: none;
position: absolute;
background-color: #003300;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3)
}
.menu-drop-content a {
color: white;
padding: 15px 15px 0 0;
display: block;
text-align: left;
}
.menu-dropdown:hover .menu-drop-content {
display: block;
}
.menu-drop-content a:hover {
background-color: #6699cc;
}
.menu-active {
float: left;
background-color: #336600;
}
/* Body and Background */
body {
background-color: #ffcc80;
height: 200vh;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<ul id="main-menu">
<li class="menu-active" id="active"><a>Home</a></li>
<li><a>Contact</a></li>
<li class="menu-dropdown"><a class="menu-drop-btn">Portfolio</a>
<div class="menu-drop-content">
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div></li>
<li><a>About Us</a></li>
</ul>
<div>
<h1>Testing testing...</h1>
</div>
</body>
</html>
I would suggest moving the :not filter to the list item. This seems to work:
li:not(#active) a:hover {
background-color: #6699cc;
cursor: pointer;
}
The rule, when written like this, selects the hover "event" of any anchor element that is a child (a descendant) of a list item that does not have the ID of "active".
Like so:
/* Main Navigation Menu */
ul#main-menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #336699;
}
li {
float: right;
}
li a, .menu-drop-btn {
display: inline-block;
color: white;
padding: 15px;
text-decoration: none;
}
/* This is the change that seems to work */
li:not(#active) a:hover {
background-color: #6699cc;
cursor: pointer;
}
li.menu-drop-btn {
display: inline-block;
}
.menu-drop-content {
display: none;
position: absolute;
background-color: #003300;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3)
}
.menu-drop-content a {
color: white;
padding: 15px 15px 0 0;
display: block;
text-align: left;
}
.menu-dropdown:hover .menu-drop-content {
display: block;
}
.menu-drop-content a:hover {
background-color: #6699cc;
}
.menu-active {
float: left;
background-color: #336600;
}
/* Body and Background */
body {
background-color: #ffcc80;
height: 200vh;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<ul id="main-menu">
<li class="menu-active" id="active"><a>Home</a></li>
<li><a>Contact</a></li>
<li class="menu-dropdown"><a class="menu-drop-btn">Portfolio</a>
<div class="menu-drop-content">
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div></li>
<li><a>About Us</a></li>
</ul>
<div>
<h1>Testing testing...</h1>
</div>
</body>
</html>
Related
I am trying to code a menu with a mega menu option.
The top level links have an underline animation.
If the top level nav has a mega class, the mega menu container shows, but the underline animation does not.
If I lower the mega menu container, the animation does show, but as soon as the mouse moves off the top link into the container, the container hides as there is a gap because the un-hover switches it off.
Also, moving right from the top level from Option1 to Option 2, nav hides the mega container and the animation shows(correct), but moving right to the Sign In link does not hide the mega container or do the animation.
body #mainMenu {
background-color: #fff;
height: 80px;
position: absolute;
top: 0px;
left: 0;
width: 100%;
padding: 10px;
align-items: center;
display: flex;
padding-left: 40px;
padding-right: 40px;
}
#menuOptions {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
position: relative;
width: 100%;
padding: 0;
list-style-type: none;
font-size: 12px;
font-weight: 400;
}
#menuOptions li {
display: flex;
}
#menuOptions li a {
color: #000;
}
#menuOptions li a:link {
text-decoration: none;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: red;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.mega-container {
display: none;
position: absolute;
top: 0px;
left: 0;
height: 120px;
width: 100%;
}
.mega:hover .mega-container {
display: block;
padding-top: 30px;
}
.mega-menu {
background-color: yellow;
height: 100px;
padding: 60px;
}
<html>
<head>
<title>Mega Menu</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav id='mainMenu'>
<ul id='menuOptions'>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Sign In</a></li>
<li class='mega'><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 1</a>
<div class='mega-container'>
<div class='mega-menu'>
<p>This is mega menu 1</p>
</div>
</div>
</li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 2</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 3</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 4</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 5</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 6</a></li>
</ul>
</nav>
</body>
</html>
try below code for animation with mega menu using css only.
set column in menu using float and width property of css or you can use table also.
you can use font.awesome style or html entity for icon of submenu.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: skyblue;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h4>Mega Menu</h4>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
Please don't be rude, im new on here and dont know much about this site, if you do answer my issue, it would help if you leave a "explanation" of what you changed, added, etc. and what it would do
I want to have a menu that has a dropdown, but inside the dropdown will be another dropdown menu [Image of what I'm talking about, (red being the area of the dropdown menu that's inside the other dropdown menu)]
codes given below first is style.css, second is index.html
body
{
font-family: sans-serif;
background: #FFB6C1;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #FFC0CB;
}
label.logo
{
color: white;
font-weight: bold;
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
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: #ffaebd;
}
li.dropdown
{
display: inline-block;
}
li.dropdown a, .dropbtn
{
color: white;
}
.dropdown-content
{
display: none;
position: absolute;
background: #201e2a;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
}
.dropdown-content a
{
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown a:hover
{
background: #ffaebd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
/* next */
body
{
font-family: sans-serif;
background: #FFB6C1;
}
/* FFA07A */
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #FFC0CB;
}
label.logo
{
color: white;
font-weight: bold;
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li
{
float: left;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<label class="logo">Test Page</label>
<li>Home</li>
<li class="dropdown">
Dropdown Menu
<div class="dropdown-content">
Link One
Link Two
Sub Dropdown
<!-- (set to this instead of a dropdown just for showcase/ss reasons) -->
</div>
</li>
</ul>
</body>
</html>
You can do it by putting your exact code of dropdown inside your sub dropdown
<li class="dropdown">
<a id="drpbtn" class="dropbtn">Dropdown Menu</a>
<div aria-label="drpbtn" class="dropdown-content">
Link One
Link Two
Sub dropdown btn
<div aria-label="drpbtn2" class="sub-dropdown-content">
Link One
Link Two
</div>
</div>
</li>
here is an example of how you can do this and I try to keep it as simple as possible to understand how it works :
ul {
margin: 0;
padding: 0;
display: none;
}
.menu {
display: block;
}
li {
padding: 16px;
}
li:hover > ul {
display: block;
}
<ul class="menu">
<li>
Hover me !
<ul>
<li>Menu Item</li>
<li>
Menu Item
<ul>
<li>Menu Item</li>
<li>
Menu Item
</li>
</ul>
</li>
</ul>
</li>
</ul>
codesandbox: https://codesandbox.io/s/vibrant-grass-1byw0b
Well, according to the video I saw on YouTube, I wanted to start by creating a dropdown list. Everything was fine in the first step, and I created two sub-menus, host and domain, for the Services tag. Now I want to create several submenus for the host and domain submenus, but unfortunately the submenus are not fully displayed and only the last submenu is displayed?
What do you think I should do? where is the problem from ?
Attached image and html and css files
Note: I am totally newbie so simple explanations would be better
*{
box-sizing: border-box;
}
body{
margin: 0;
}
header{
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
header .menu{
margin: 0px;
background-color: orange;
}
header nav ul{
margin: 0px;
}
a{
text-decoration: none;
}
.menu ul li{
display: inline-block;
margin: 20px;
padding: 20px;
font-weight: bold;
color: black;
}
ul li:hover{
background-color: rgb(132, 127, 127);
color:rgb(249, 249, 249);
}
.sub-menu1{
width:200px;
display: none;
background-color: orange;
position: absolute;
margin-left: -20px !important;
padding: 0px !important;
transform: translateY(20px);
}
.sub-menu1 li{
width:200px;
margin: 0px !important;
}
.dropdown_menu:hover ul{
display: block ;
}
.sub-menu1 li:hover{
background-color: rgb(103, 197, 109);
color:rgb(249, 249, 249);
}
.sub-host ul li{
width:200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
position: absolute;
transform: translate(140px, -55px);
}
.sub-domain ul li{
width:200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
position: absolute;
transform: translate(140px, -55px);
}
.sub-domain ul li{
display: none;
}
.sub-host:hover li{
display: block;
}
.sub-domain:hover li{
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<meta name="viewport" content="width=device-width, intital-scale=1.0">
<title> Dropdown Menu </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="menu">
<ul>
<li> Home </li>
<li> About us </li>
<li> Contact us </li>
<li class="dropdown_menu">
Services
<ul class="sub-menu1" >
<li class="sub-host" >
Host
<ul class="sub-menu2">
<li>1-month</li>
<li>3-month</li>
<li>6-month</li>
<li>12-month</li>
</ul>
</li>
<li class="sub-domain">
Domain
<ul class="sub-menu3">
<li>.ir</li>
<li>.com</li>
<li>.org</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
Image
You are facing this issue because by mistake you have made position of .sub-domain ul li and .sub-host ul li as absolute due to which all the sub-menus are stacking on each other and only last one is visible. To fix the issue remove position:absolute. I have also removed two bugs which occur while hovering on submenu. You can see the code.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
header .menu {
margin: 0px;
background-color: orange;
}
header nav ul {
margin: 0px;
}
a {
text-decoration: none;
}
.menu ul li {
display: inline-block;
margin: 20px;
padding: 20px;
font-weight: bold;
color: black;
}
ul li:hover {
background-color: rgb(132, 127, 127);
color: rgb(249, 249, 249);
}
.sub-menu1 {
width: 200px;
display: none;
background-color: orange;
position: absolute;
margin-left: -20px !important;
padding: 0px !important;
transform: translateY(20px);
}
.sub-menu1 li {
width: 200px;
margin: 0px !important;
}
.dropdown_menu:hover ul {
display: block;
}
.sub-menu1 li:hover {
background-color: rgb(103, 197, 109);
color: rgb(249, 249, 249);
}
.sub-host ul li {
width: 200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
transform: translate(140px, -55px);
}
.sub-domain ul li {
width: 200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
transform: translate(140px, -55px);
}
.sub-domain ul li {
display: none;
}
.sub-host:hover li {
display: block;
}
.sub-domain:hover li {
display: block;
}
.sub-menu2,
.sub-menu3 {
position: absolute;
height: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<meta name="viewport" content="width=device-width, intital-scale=1.0">
<title> Dropdown Menu </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="menu">
<ul>
<a href="#">
<li> Home </li>
</a>
<li> About us </li>
<li> Contact us </li>
<li class="dropdown_menu">
Services
<ul class="sub-menu1">
<li class="sub-host">
Host
<ul class="sub-menu2">
<li>1-month</li>
<li>3-month</li>
<li>6-month</li>
<li>12-month</li>
</ul>
</li>
<li class="sub-domain">
Domain
<ul class="sub-menu3">
<li>.ir</li>
<li>.com</li>
<li>.org</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
I'm trying to design the nav bar of the website I'm building. I include the code below, but I cannot figure out how to get the nav bar options to appear like a folder tab. See this image:
I don't understand how to do this with HTML and CSS. What I have at the moment is:
HTML
nav {
margin: 0px;
}
ul {
list-style-type: none;
color: lightskyblue;
background-color: royalblue;
font-family: Helvetica;
font-size: 180%;
margin: 0px;
}
li {
display: inline-block;
background-color: white;
padding-top: 2px;
border: 5px;
border-colour: red;
}
a {
display: block;
color: lightskyblue;
}
li a {
text-decoration: none;
padding-top: 8px;
padding-left: 0px;
padding-right: 0px;
}
li a:hover {
color: white;
background-color: lightskyblue;
text-decoration: none;
}
<nav>
<ul>
<li>
<a class="active" href="http://www.google.com/ncr">Home</a>
</li>
<li> Full list of Articles</li>
<li> Disciplines</li>
<li> More Resources</li>
<li> <a class="about" href="http://www.google.com/ncr">About Me</a></li>
</ul>
</nav>
In the below, I have created an offsett on the main 'ul' and set the 'li' items above it using "top: -41px" and "position: relative".
Then, using JavaScript, I added eventlisteners to each of the list items, that when hovered over will change the 'ul' background color.
Obviously the styling needs some work but that is something you should try to do yourself.
Please see below:
//event listeners for the 'hovers'
document.getElementById("firstitem").addEventListener("mouseover", function() {
document.getElementById("list").style.backgroundColor = "royalblue";
});
document.getElementById("seconditem").addEventListener("mouseover", function() {
document.getElementById("list").style.backgroundColor = "pink";
});
document.getElementById("thirditem").addEventListener("mouseover", function() {
document.getElementById("list").style.backgroundColor = "green";
});
document.getElementById("fourthitem").addEventListener("mouseover", function() {
document.getElementById("list").style.backgroundColor = "red";
});
document.getElementById("fifthitem").addEventListener("mouseover", function() {
document.getElementById("list").style.backgroundColor = "yellow";
});
* {
margin: 0px;
padding: 0px;
}
nav {
margin: 0px;
}
ul {
list-style-type: none;
color: lightskyblue;
background-color: royalblue;
font-family: Helvetica;
font-size: 180%;
margin: 0px;
margin-top: 41px;
}
li {
display: inline-block;
background-color: white;
padding-top: 0px;
border: 5px;
top: -41px;
padding: 0px 5px;
position: relative;
border-color: red;
}
li:first-child {
background-color: royalblue;
}
li:nth-child(2) {
background-color: pink;
}
li:nth-child(3) {
background-color: green;
}
li:nth-child(4) {
background-color: red;
}
li:nth-child(5) {
background-color: yellow;
}
a {
display: block;
color: rgb(108, 162, 196);
}
li a {
text-decoration: none;
padding-top: 8px;
padding-left: 0px;
padding-right: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<nav>
<ul id="list">
<li id="firstitem">
<a class="active" href="http://www.google.com/ncr">Home</a>
</li>
<li id="seconditem"> Full list of Articles</li>
<li id="thirditem"> Disciplines</li>
<li id="fourthitem"> More Resources</li>
<li id="fifthitem"> <a class="about" href="http://www.google.com/ncr">About Me</a></li>
</ul>
</nav>
<script src="scripts.js"></script>
</body>
</html>
this is my first post. Hope I'm specific enough to get some help :)
I created a dropdown menu in my navigation bar for my clanwebsite. But I can't change the css in a way that it would be the same as my other titles from the navigation bar.
Also when I go over it with my cursor, the login button is being moved. And the css of my navigation is different when I go to the Main team page in the dropdown menu.
Thanks!
NOTE don't mind the php. Still working on that.
my HTML of the home page
<html>
<head>
<link rel="stylesheet" href="Opmaak.css">
<title>WKG</title>
</head>
<body>
<ul>
<li>Home</li>
<li>Line-ups</li>
<li><div class="dropdown">
<button class="dropbtn">Teams</button>
<div class="dropdown-content">
Main Team
Team 2
</div>
<li>Matchen</li>
<li>About</li>
<li>Games</li>
</ul>
</body>
</html
my CSS
p {
font-size: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
background-color: #444;
}
li {
float: left;
box-shadow: 15px 15px 50px #888888;
font-size: 20px;
}
li a {
display: block;
color: darkgray;
text-align: center;
padding: 20px 50px;
text-decoration: inherit;
box-shadow: 3px 3px 3px crimson;
border-color: crimson;
position: relative;
display: inline-block;
}
.dropdown-content a {
display: block;
background-color: slategray;
}
.dropdown-content {
display: none;
position: inherit;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn {
overflow: hidden;
background-color: slategray;
color: darkgray;
text-align: center;
padding: 20px 50px;
text-decoration: inherit;
box-shadow: 3px 3px 3px crimson;
border-color: crimson;
font-size: 20px;
position: relative;
display: inline-block;
}
. dropbtn:hover {
background-color: crimson;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: crimson;
padding: 20px 50px;
}
and my Main Team page
<html>
<head>
<link rel="stylesheet" href="Opmaak.css">
<title>WKG</title>
</head>
<body>
<ul>
<li>Home</li>
<li>Line-ups</li>
<div class="dropdown">
<button class="dropbtn">Teams</button>
<div class="dropdown-content">
Main Team
Team 2
</div>
<li>Matchen</li>
<li>About</li>
<li>Games</li>
</ul>
</body>
</html