I am trying to display some content in div tag when hovering on the menu. Here I am trying to display a div when hovering on About. But it does not work.Kindly only check the commented portion. Ignore rest!
Here is my html:
<html>
<head>
<link rel="stylesheet" href="Style/styling.css">
<head>
<body>
<div class="container">
<header class="head-nav">
<img class="logo" src="Images/Logo.jpg">
<nav class="navigation">
<ul>
<li>Home</li>
<!––The hovering Menu––>
<li class="dispmenu">About</li>
<li >Center</li>
<li >Team </li>
<li>Team</li>
<li>Testing</li>
<li>Services</li>
<ul>
</nav>
</header>
<div class="submenu">
Hello
</div>
</div>
</body>
</html>
And CSS:
.container {
width: 1000px;
height: 1000px;
margin: 0 auto;
border: 1px solid gray;
}
header {
overflow: hidden;
}
.logo {
float: left;
}
.navigation ul {
list-style: none;
}
.navigation ul li {
background-color: #e0e0d1;
margin-top: 40px;
width: 96px;
border: 1px solid lightblue;
height: 40px;
text-align: center;
float: left;
}
.navigation ul li a {
font-size: 11px;
text-decoration: none;
color: black;
}
li a:hover:not(.active) {
color: #2485ba;
}
.active {
color: #2485ba;
}
/*the css for hiding and displaying*/
.dispmenu:hover .submenu {
visibility: visible;
}
.submenu {
background-color: darkblue;
color: white;
width: 684;
height: 100px;
margin-left: 312px;
visibility: hidden;
}
Here's a jQuery option if you go that route..
fiddle
https://jsfiddle.net/Hastig/ns6j55zg/
You can read about .hover here
$('.dispmenu').hover(function() {
$('.submenu').addClass('dispmenu-hover');
}, function() {
$('.submenu').removeClass('dispmenu-hover');
})
body {
margin: 0;
}
.container {
/*width: 1000px;*/
/*height: 1000px;*/
margin: 0 auto;
border: 1px solid gray;
}
header {
overflow: hidden;
}
.logo {
float: left;
}
.navigation ul {
list-style: none;
display: flex;
}
.navigation ul li {
display: flex;
background-color: #e0e0d1;
margin-top: 40px;
/*width: 96px;*/
flex: 1;
border: 1px solid lightblue;
height: 40px;
text-align: center;
float: left;
}
.navigation ul li a {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
text-align: center;
font-size: 11px;
text-decoration: none;
color: black;
}
li a:hover:not(.active) {
color: #2485ba;
}
.active {
color: #2485ba;
}
.submenu {
background-color: darkblue;
color: white;
width: 684;
height: 100px;
margin-left: 312px;
visibility: hidden;
}
/*the css for hiding and displaying*/
/* this class moved to appear after .submenu class */
.dispmenu-hover {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header class="head-nav">
<img class="logo" src="Images/Logo.jpg">
<nav class="navigation">
<ul>
<li>Home</li>
<!––The hovering Menu––>
<li class="dispmenu">About</li>
<li>Center</li>
<li>Team </li>
<li>Team</li>
<li>Testing</li>
<li>Services</li>
</ul>
</nav>
</header>
<div class="submenu">
Hello
</div>
</div>
.dispmenu:hover .submenu {
You have a space between those selectors. A space is a descendant combinator.
The element <div class="submenu"> is not a descendant of the element <li class="dispmenu">. It is a sibling of the great-grandparent of the list item.
CSS selectors provide no way to describe going up the DOM tree, so you can't achieve this without either:
Changing the structure of the DOM
Using JavaScript
Ideally you should do both since:
It doesn't make much sense for a submenu to be completely disconnected from the menu item it is for. Think about how that type of data is normally represented.
You can't put in things like time delays before a menu vanishes, which makes a menu like the one you are trying to create challenging for people with some accessibility needs (e.g. sufferers of arthritis who many struggle to move the mouse in a straight line and keep the pointed inside the borders of the menu).
Related
I am having a hard time on how to re-arrange my HTML/CSS code in order to move a few links inside of a hamburger nav menu.
I would like to have 'home' always visible but then, I would like the other linked pages to fall inside the hamburger menu, only visible when clicking the menu...
I would like the following to be inside the hamburger menu:
About
Contact
Portfolio ,etc.
Any suggestions on how to achieve this?
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100px;
display: table-cell;
}
.header-logo img {
height:100px;
padding: 10px 0px 10px 10px;
float: left;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 30px;
}
header nav ul li {
display: inline-block;
padding: 0 5px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.sub {
display: none;
background-color: rgb(70, 149, 223);
margin-left: 5%;
height: auto;
}
/* HAMBURGER MENU */
.nav div {
height: 4px;
background-color: rgb(20, 15, 15);
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30;
display: block;
float: right;
margin: 1em 0 0 1em;
padding-right: 10px;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.nav:hover div{
width: 30px;
}
ul li a:hover {
color: rgb(255, 255, 255);
}
<header>
<div class="header-logo">
<img src="img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul> <li>Home</li></ul>
<ul>
<a href="#" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
<div class="sub">
<li>Subscribe</li>
</div>
</a>
</ul>
</nav>
</header>
What you are looking for is called toggle. For this you need to use javascript or jquery (a simplified javascript "version"). To easy explain this, put for example a parent div for the child elements you want to toggle. Then in your css display this parent div none. Then you use jquery to be able to tell what you want to be clickable and then later what you want to toggle.
//Script.js
$(document).ready(function(){ //Use ready to make a function available after the document is loaded
$(".nav").click(function(){
$("#hamburger").toggle(250);
});
});
/* Style.css */
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100px;
display: table-cell;
}
.header-logo img {
height:100px;
padding: 10px 0px 10px 10px;
float: left;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 30px;
}
header nav ul li {
display: inline-block;
padding: 0 5px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.sub {
display: none;
background-color: rgb(70, 149, 223);
margin-left: 5%;
height: auto;
}
/* HAMBURGER MENU */
.nav div {
height: 4px;
background-color: rgb(20, 15, 15);
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30;
display: block;
float: right;
margin: 1em 0 0 1em;
padding-right: 10px;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.nav:hover div{
width: 30px;
}
#hamburger{
display:none;
}
ul li a:hover {
color: rgb(255, 255, 255);
}
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type = "text/javascript" src = "script.js">
</head>
<header>
<div class="header-logo">
<img src="https://milestonehackers.com/img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul> <li>Home</li></ul>
<ul>
<a href="#" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div id = "hamburger">
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</div>
<div class="sub">
<li>Subscribe</li>
</div>
</a>
</ul>
</nav>
</header>
Edit: I added the src to the new script.js file which should contain your click function:)
Don't think you could achieve what you want only using CSS, maybe with a lot of CSS "hacks". I'd suggest adding some javascript to show on click.
I'd recommend checking this page https://www.w3schools.com/howto/howto_js_mobile_navbar.asp since they have an example just like the one you trying to achieve.
I am looking to have it so that when you hover over the nav bar the drop-down menu sits above/on-top of the main content, however at the moment when the menu drops down it is pushing the main image down and not sitting on top as I would expect the z-index property to do.
I have set the nav div to relative and also the main section div to relative but still with no joy!
Anyone out there able to help with this, please?
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img/main-image.png" alt="" />
</div>
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
position: relative;
z-index: 1;
}
ul {
list-style: none;
padding: 0;
float: right;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
position: relative;
}
#main-img {
width: 100%;
height: 100vh;
}
The #main-section is pushed down because the dropdown menu is positioned within the flow of the document.
When it is not hovered, it has display: none which takes it out of the DOM.
When hover, it switches to position: block which puts it back - and it occupies space, and pushes the main-content down.
You can test this by adding the desired end-result display: block by default, and see how the document would look in it's expanded state.
You need to apply position: absolute to your drop-down, in order for it to not interfere with the document flow. You could also move the z-index: 1 directly on it, if that is the content that should be on top - or you could leave it on the parent, and should work just as well. - the z-index is not the problem here.
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
}
ul {
list-style: none;
padding: 0;
float: right;
background-color: #ec671c;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
position:relative;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
}
#main-img {
width: 100%;
height: 100vh;
}
#top-bar-container >nav >ul > li > ul{
position:absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img" alt="" />
</div>
</body>
</html>
hi
You can do in the section ul>li{position:relative} and Also, put in a second UL {position:absolute}
I am new to web design. I am trying to create a site where in some menus in menu bar have sub menus. I want on mouse hove it should display submenu which is not happening. This is my code:
#charset "UTF-8";
body {
margin: 0;
}
. wrapper {
height: 100vh;
}
nav {
height: 44px;
background: #323232;
text-align: center;
/* to center the UL in the nav */
}
nav ul {
display: flex;
max-width: 1200px;
justify-content: space-around;
align-items: center;
padding: 0;
margin: 0 auto;
/* 0 auto allows it to self-center in the nav */
list-style-type: none;
}
nav li {}
nav a {
display: inline-block;
height: 44px;
line-height: 44px;
color: white;
font-size: 15px;
font-weight: 100;
text-decoration: none;
transition: 0.3s;
}
nav a:hover {
color: #B8B8B8;
}
.dropdown ul {
position: absolute;
top: 43px;
z-index: 100;
visibility: hidden;
}
.dropdown ul li a {
background: none;
text-align: left;
display: block;
}
li li {
width: 100%;
}
.dropdown li:hover>ul {
display: block;
}
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a>Drinks</a>
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Special Diet</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div class="fft">Food For Thought</div>
<br>
<br>
<img src="Indian_Spices.jpg" alt="Spices" class="main_wrapper">
<!--<div class="main_wrapper" ></div>-->
On mouse hover on 'Drinks' nothing comes up. I want when I move mouse on 'Drikns' sub menus 'Pan Shots' and 'Tea' should be visible and should hide when mouse is not on 'Drinks'.
Your example is kinda messy and there's a lot of unnecessary code, i'm gonna present you with an example that can you work from.
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
list-style: none;
}
ul>li {
flex: 1;
background: dodgerblue;
height: 45px;
text-align: center;
}
ul>li>a {
text-align: center;
line-height: 45px;
text-decoration: none;
color: #fff;
}
ul>li>ul {
display: none;
}
ul>li:hover>ul {
display: block;
}
.dropdown>a:after{
content:'▿';
font-weight:bold;
}
<ul>
<li>Home</li>
<li class="dropdown">Drinks
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Contact Us</li>
</ul>
You are mixing display and visibility. Your selector is wrong as well.
.dropdown li:hover>ul
Means that CSS is looking for an li child element of .dropdown to be hovered before something is done with the > ul
Since CSS properties are inherited your text is still white in a child element. Therefor you don't see the text.
Try the following:
#charset "UTF-8";
body {
margin: 0;
}
. wrapper {
height: 100vh;
}
nav {
height: 44px;
background: #323232;
text-align: center;
/* to center the UL in the nav */
}
nav ul {
display: flex;
max-width: 1200px;
justify-content: space-around;
align-items: center;
padding: 0;
margin: 0 auto;
/* 0 auto allows it to self-center in the nav */
list-style-type: none;
}
nav li {}
nav a {
display: inline-block;
height: 44px;
line-height: 44px;
color: white;
font-size: 15px;
font-weight: 100;
text-decoration: none;
transition: 0.3s;
}
nav a:hover {
color: #B8B8B8;
}
.dropdown ul {
position: absolute;
top: 43px;
z-index: 100;
visibility: hidden;
}
.dropdown ul li a {
background: none;
text-align: left;
display: block;
}
li li {
width: 100%;
}
.dropdown:hover ul {
visibility: visible;
}
.dropdown ul a {
color: black;
}
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a>Drinks</a>
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Special Diet</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div class="fft">Food For Thought</div>
<br>
<br>
<img src="Indian_Spices.jpg" alt="Spices" class="main_wrapper">
<!--<div class="main_wrapper" ></div>-->
I Created this page with the help of some tutorial and I edited the code to attach a text box in the center of the page but the text box is mixing with the navigation menu. Some Help Would be appreciated. I have very less knowledge of html and css so please guide me in a simple way. I searched on the google and also got a w3 article but that did not help as I have used it in the css as yu can can see I have used margin-top , bottom , left and right to solve problem but instead it is mixing or overlapping it self with the navigation menu.
body {
background: url('nature.jpg') no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
div.transbox {
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
margin-top: 200px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<html>
<link href='style.css' rel='stylesheet'>
<ul>
<li>Home</li>
<li>About
<ul>
<li><a>Our Team</a></li>
<li><a>Camp Sites</a></li>
<li><a>Mission</a></li>
<li><a>Resources</a></li>
</ul>
</li>
<li>Things to do
<ul>
<li><a>Activities</a></li>
<li><a>Parks</a></li>
<li><a>Shops</a></li>
<li><a>Events</a></li>
</ul>
</li>
<li>Contact
<ul>
<li><a>Map</a></li>
<li><a>Directions</a></li>
</ul>
</li>
<li>News</li>
</ul>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</html>
You have to add
.background {
clear: both;
}
This is to clear the float: left that was applied before.
Read more on float
I have a simple nav menu at the top of a page I'm working on. I want one of the links on the nav menu to have a dropdown menu pop up underneath it when you hover over it.
I have the drop down menu appearing just fine. The only problem is that the drop down menu items are the width of the entire page instead of the width of a nav menu item. I'm not sure what's causing it...
Here is the html and css for the nav menu and drop down menu:
.dropdown {
float: left;
background-color: #FFF0F5;
}
.dropDiv {
position: relative;
display: inline-block;
width: 100%;
}
.dropdownContent {
display: none;
background-color: #FFF0F5;
z-index: 1;
width: 300px;
overflow-x: hidden;
}
.dropdownContent a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 300px;
}
.dropdownContent a:hover {
background-color: #fff8dc;
}
.dropDiv:hover .dropdownContent {
display: block;
z-index: 1;
height: 200px;
width: 300px;
overflow-x: hidden;
}
.dropDiv:hover .dropdown {
background-color: #fff8dc;
}
<nav>
<ul>
<li>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<div class="dropDiv">
<li class="dropdown">History</li>
<div class="dropdownContent">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</div>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>
As you can see It's a bit of a mess since I've been adding lots of things trying to think of something to fix this width issue. Any help is greatly appreciated!
Your code worked fine for me. Looks like some other CSS in your code is making it full width. Have you tried fixing it with "!important" or "max-width"?
You should create dropDiv in the li tag and make it absolute position to get the parent widht
nav ul {
padding:0;
margin:0;
}
nav ul li {
list-style: none;
float: left;
position: relative;
margin: 0 5px;
}
nav ul li a{
color: #000;
text-decoration: none;
}
.dropdown {
float: left;
background-color: #FFF0F5;
}
nav ul li:hover .dropDiv {
display: block;
z-index: 1;
height: 200px;
width: 300px;
overflow-x: hidden;
}
.dropDiv:hover .dropdown {
background-color: #fff8dc;
}
.dropDiv {
position: absolute;
width: 100%;
display: none;
background-color: #FFF0F5;
z-index: 1;
width: 300px;
overflow-x: hidden;
}
.dropDiv a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropDiv a:hover {
background-color: #fff8dc;
}
<nav>
<ul>
<li>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<li class="dropdown">History
<div class="dropDiv">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</li>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>
Hello just define width for nav bar as you want I've defined 700px. and add some css . check this code
.dropdown {
float: left;
background-color: #FFF0F5;
}
.dropDiv {
position: relative;
display: inline-block;
list-style: none;
padding: 9px;
float: left;
max-width: 100%;
}
.dropdownContent {
display: none;
background-color: #FFF0F5;
z-index: 1;
width: 300px;
overflow-x: hidden;
}
.dropdownContent a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdownContent a:hover {background-color: #fff8dc;}
.dropDiv:hover .dropdownContent {
display: block;
z-index: 1;
overflow-x: hidden;
top: 30px;
left: 10px;
position: absolute;
}
.dropDiv:hover .dropdown {
background-color: #fff8dc;
}
nav {width:700px;float: left;}
nav > ul > li { float: left;
padding: 9px;list-style: none}
ul{float:left;}
<nav>
<ul>
<li>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<div class="dropDiv">
<li class="dropdown">History</li>
<div class="dropdownContent">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</div>
</li>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>
I think this is what you want.