Dropdown in HTML/CSS - javascript

I'm trying to make to make my first website with html and css (and js later). I want to make a calculator with a dropdown menu, but I'm struggling to make the dropdown menu as when it is hovered over, the dropdown list covers the menu.
.redirect:hover {
background-color: #aac8ff;
}
div {
background-color: #ccd9fb;
}
h1 {
font-size: 20px;
}
.dropdown-content a {
background-color: #aac8ff
}
.container:hover .dropdown-content {
display: block
}
.dropdown-content a:hover {
background-color: #99b7ff;
}
li.container {
display: inline
}
li {
display: inline;
}
body {
background-color: #eefbfb;
}
.top h1,
.top ul {
display: inline-block;
vertical-align: top;
}
.redirect {
text-decoration: none;
font-size: 20px;
display: block;
float: right;
color: #fff;
width: 125px;
text-align: center;
border-left: 1px solid #eefbfb;
padding: 14px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
min-width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-color: #99b7ff;
}
.dropdown-content a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
<div class="top">
<h1>123Calculator</h1>
</span>
<ul>
<li><a class="redirect" href="equations.html">Equations</a></li>
<li><a class="redirect" href="physics.html">Physics</a></li>
<li class="container">
<a class="redirect" href="maths.html">Maths</a>
<div class="dropdown-content">
Algebraic Expressions
Equations and Inequalities
Sketching Curves
Equations of Straight Lines
Circles
Trigonometry
Exponentials and Logarithms
Differentiation
Integration
Vectors
Proof
Kinematics
Forces
</div>
</li>
</ul>
</div>
I spent at least 3 hours trying to figure out how to make it so that the dropdown list is under "Maths" instead of covering it.

Your .dropdown-content has position absolute, add the top css rule to that selector and push the dropdown-content element down below the main nav.
position: absolute ~ The element is positioned relative to its first positioned (not static) ancestor element. This will allow you to set top, left, right and bottom.
.redirect:hover {
background-color: #aac8ff;
}
div {
background-color: #ccd9fb;
}
h1 {
font-size: 20px;
}
.dropdown-content a {
background-color: #aac8ff
}
.container:hover .dropdown-content {
display: block
}
.dropdown-content a:hover {
background-color: #99b7ff;
}
li.container {
display: inline
}
li {
display: inline;
}
body {
background-color: #eefbfb;
}
.top h1,
.top ul {
display: inline-block;
vertical-align: top;
}
.redirect {
text-decoration: none;
font-size: 20px;
display: block;
float: right;
color: #fff;
width: 125px;
text-align: center;
border-left: 1px solid #eefbfb;
padding: 14px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
top: 58px;
z-index: 1;
min-width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-color: #99b7ff;
}
.dropdown-content a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
<body>
<div class="top">
<h1>123Calculator</h1>
</span>
<ul>
<li><a class="redirect" href="equations.html">Equations</a></li>
<li><a class="redirect" href="physics.html">Physics</a></li>
<li class="container">
<a class="redirect" href="maths.html">Maths</a>
<div class="dropdown-content">
Algebraic Expressions
Equations and Inequalities
Sketching Curves
Equations of Straight Lines
Circles
Trigonometry
Exponentials and Logarithms
Differentiation
Integration
Vectors
Proof
Kinematics
Forces
</div>
</li>
</ul>
</div>
</body>

Related

Trying to fix a navigation bar with a drop down menu to top of page

I'm trying to add a navigation bar to a web app I'm making for a class, and I wanted to use a drop-down menu in it (too many things to include to put everything straight across).
I want the bar to be fixed to the top of the page, but when I put in position: fixed;, the drop-down menu stops working.
Is there any way around this? Am I just putting the position: fixed; in the wrong spot, or is conflicting with the drop down content having position: absolute; maybe...?
(I'm very new to web stuff, so if you see anything else I could change/approve, please let me know! Advice very much appreciated)
ul {
list-style-type: none;
margin: 0;
top: 0;
position: fixed;
width: 100%;
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: #111;
}
li.dropdown {
display: inline-block;
}
.active {
background-color: #4CAF50;
}
.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;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
</br>
</br>
<ul>
<li><a class="active" href="/homePageAgent">Home</a></li>
<li class="dropdown">
View Pages
<div class="dropdown-content">
View Booked Flights
View Top Customers
</div>
</li>
<li style="float:right">Logout</li>
</ul>
</head>
</html>
Basically, "View Pages" should become a drop down menu when hovered over with the mouse, and it does if I take out the "position:fixed;" line, but... I want the position to be fixed.
Put your navigation into a layer. And make this layer with fixed position.
.navbar-top {
margin: 0;
padding: 0;
width: 100%;
top: 0;
position: fixed;
}
ul {
list-style-type: none;
margin: 0;
top: 0;
/*position: fixed;*/
width: 100%;
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: #111;
}
li.dropdown {
display: inline-block;
}
.active {
background-color: #4CAF50;
}
.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;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
</head>
<body>
<div class="navbar-top">
<ul>
<li><a class="active" href="/homePageAgent">Home</a></li>
<li class="dropdown">
View Pages
<div class="dropdown-content">
View Booked Flights
View Top Customers
</div>
</li>
<li style="float:right">Logout</li>
</ul>
</div>
</body>
</html>
You can delete ul{overflow:hidden;}
You should not apply for the position:fixed on the UL
You can use a div to warp the UL and apply on it the position fixed.
Here is one way to achieve this (live demo):
.mainheader {
height: 25px;
position: fixed;
display: block;
z-index: 10;
background: #333;
width: 100%;
font-size: 14px;
top: 0;
font-family: Calibri;
}
.nav {
width: 100%;
height: 25px;
background: #333;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
top: 0;
width: 100%;
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: #111;
}
li.dropdown {
display: inline-block;
}
.active {
background-color: #4CAF50;
}
.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;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
</head>
<body>
<div class="mainheader">
<div class="nav">
<ul>
<li>
<a class="active" href="/homePageAgent">Home
</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">View Pages
</a>
<div class="dropdown-content">
<a href="/agentViewFlights">View Booked Flights
</a>
<a href="/agentTopCustomers">View Top Customers
</a>
</div>
</li>
<li style="float:right">
<a href="/logout">Logout
</a>
</li>
</ul>
</div>
</div>
</body>
</html>

Mouse hover to open menga menu in Angular 6

I am new to Angular 6 and Bootstrap ,Here I have a Navigation bar with 3 nav items .
In this I have a nav item named as Store ,When User mouse hover on the Store I need to show a mega menu .mega menu should have the with of the nav bar .
I have tried something but I could not get what I expected .
Stackblitz : https://stackblitz.com/edit/angular-q4p7cc?file=src%2Fstyles.css
can anyone help me to solve this .
try solution
HTML:
<div class="navbar">
<div *ngFor="let cat of category" class="dropdown">
<button class="dropbtn">Link {{cat.catnumber}}
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div *ngFor="let catg of cat.nest" class="column">
<h3>Category {{cat.catnumber}} {{catg.link}} </h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
style.css:
.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: fixed;
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: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
background: yello;
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 50%;
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;
}

Z-Index not working for drop down navbar

I know similar questions have been asked to do with the z index not working for a dropdown, but all of these have either not worked for my case, or were not applicable for one reason or another.
Anyway, I have an issue that whenever I hover over the main block to trigger the dropdown menu, when it does it appears behind the div that I have in front of it. (Not sure if it matters, but when I hover over an option on the dropdown, it changes colour as it is supposed to do when hovered over and it then jumps in front of the div like it was supposed to do initially).
I am not sure what is causing this as I have tried messing around with the z-index and positions in the css and just can't get it to work, and it would be a great help if someone could find out why this isn't working? I will post the relevant code below.
Thanks
P.S. I have tried in multiple browsers and this problem persists.
HTML:
<nav id="navdiv">
<ul class="navlinks">
<li><a class="active" href="portfolio.html">Home</a></li>
<li><a class="About Me" href="about.html">About me</a></li>
<li class="dropdown">Programming
<div class="dropdown-content">
Python Programs
Android Programs
Other Programs
</div>
</li>
<li><a class="contact" href="contact.html">Contact Me</a></li>
<li><a class="Course Content" href="coursecontent.html">Course Content</a></li>
</ul>
</nav>
<div1>
<p>PLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDER</p>
</div1>
css:
#navdiv {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
.navlinks {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
display: inline;
}
li a, .dropbutton {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.active {
background-color: #4CAF50;
}
li a:hover, .dropdown:hover .dropbutton {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #30313;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
z-index: 1;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: red;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
div1 {
color: white;
font-family: "Times New Roman", Times, Sans-Serif;
text-size: 16px;
z-index: -1;
width: 100%;
top: 0;
position: relative;
height: 200px;
}
here is my revision, i put a blue background for seen correct over menu to content.
And there is no element called div1 in DOM html.
i put #navdiv at top of zIndx, because is container of nav.
https://jsfiddle.net/exxe4ksc/
CSS:
#navdiv {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
position:relative;
z-index:100;
}
.navlinks {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #999;
}
li {
display: inline;
}
li a, .dropbutton {
display: inline-block;
color: white;
background:#440099;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.active {
background-color: #4CAF50;
}
li a:hover, .dropdown:hover .dropbutton {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #30313;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
z-index: 1;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: red;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
div#content {
color: white;
font-family: "Times New Roman", Times, Sans-Serif;
text-size: 16px;
z-index: 1;
width: 100%;
top: 0;
position: relative;
height: 200px;
}
HTML:
<nav id="navdiv">
<ul class="navlinks">
<li><a class="active" href="portfolio.html">Home</a></li>
<li><a class="About Me" href="about.html">About me</a></li>
<li class="dropdown">Programming
<div class="dropdown-content">
Python Programs
Android Programs
Other Programs
</div>
</li>
<li><a class="contact" href="contact.html">Contact Me</a></li>
<li><a class="Course Content" href="coursecontent.html">Course Content</a></li>
</ul>
</nav>
<div id ="content">
<p>PLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDER</p>
</div>
It's working just fine as is - you're font off the get go is white though on white background so you don't see it.
Here is a link to a working version.
http://codepen.io/hoonin_hooligan/pen/PpqxBL
.dropdown-content a {
color: #000;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
z-index: 1;
}
The problem is not the z-index, try with other color on you hover dropdown like this code:
.dropdown:hover .dropdown-content {
display: block;
background: blue;
}

How do you make a div go under another div/nav menu which is not fixed?

I am trying to make a div go under another div in which neither are fixed elements.
Here is my code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f3f3f3;
}
li {
}
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: #4CAF50;
}
li.dropdown {
}
.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;
}
.dropdown-content a:hover {background-color: #4CAF50;}
.dropdown:hover .dropdown-content {
display: block;
}
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #4CAF50;}
ul.topnav li a.active {background-color: #4CAF50;}
ul.topnav li.right {float: right;}
#media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}
#white {
background-color: white;
width: 90%;
height: 1000px;
position: relative;
margin-left: auto;
margin-right: auto;
}
<ul class="topnav">
<li><a class="active" href="#home">Home</a></li>
<li>Creations</li>
<li>Photos</li>
<li class="dropdown">
<a class="dropbtn" href="#news">Events</a>
<div class="dropdown-content">
DIY
Flea Market Flip
</div>
</li>
<li>Recycle + Upcycle</li>
<li>Saving The Enviroment</li>
<li>Contact Me</li>
</ul>
<div id="white"></div>
I need to be able to make my drop down menu appear over the div named #white. Another note, my links currently lead nowhere, so they are useless right now.
You have css property overflow:hidden in your ul.topnav and need to remove that to show the drop-down menu. Also I added z-index values to ul.topnav and #white so that menu go over the div.
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #f3f3f3;
z-index: 2;
display: inline-block;
position: relative;
}
#white {
background-color: white;
width: 90%;
height: 1000px;
margin-left: auto;
margin-right: auto;
z-index: 1;
position: relative;
}
Here is a example fiddle. Hope this helps you.

Expanding menu shifts to the right after slideToggle()

I created a mobile menu and for some reason whenever you expand the menu, the list items shift the right a bit and the border-bottom does not cover the entire width of the expanded menu.
To see the mobile part of the menu, shrink the screen down some. Once you click the menu icon, you will see that the list doesn't just go straight down, it looks to move to the right. Then the border issue is very easy to see.
See snippet to view the issue.
$('span.nav-btn').click(function () {
$('ul.nav_list').slideToggle(500);
})
$(window).resize(function (){
if ( $(window).width() > 600 ) {
$('ul.nav_list').removeAttr('style');
}
});
body {
padding: 0;
margin: 0;
font-family:
}
.header {
margin: 0;
background-color: #333;
height: 80px;
}
.header_wrap {
margin: 0 15%;
}
.logo {
color: #FFF;
font-size: 1.2em;
padding-top: 25px;
position: absolute;
}
.nav_list {
text-decoration: none;
background-color: #333;
color: #FFF;
margin: 0;
list-style: none;
text-align: right;
}
.nav_list > li {
display: inline-block;
padding: 25px 15px;
}
.nav_list > li > a {
text-decoration: none;
font-size: 1.2em;
color: #FFF;
}
#media screen and (max-width:640px) {
body {
background-color: blue;
}
.header_wrap {
margin: 0 5%;
}
.nav_list {
text-align: center;
display: none;
margin-top: 60px;
}
.nav_list > li {
display: block;
border-bottom: 1px solid #FFF;
}
.nav-btn {
display: block;
background-color: #333;
color: #FFF;
font-size: 1.5em;
text-align: right;
cursor: pointer;
padding-top: 20px;
}
.nav-btn:before {
background-image: url('http://realtorcatch.com/icons/mobile_menu_bttn.png');
background-size: 28px 28px;
background-repeat: no-repeat;
width: 28px;
height: 28px;
content:"";
display: block;
float: right;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<header class="header">
<div class="header_wrap">
<div class="logo">Garbrandt Construction</div>
<nav>
<span class="nav-btn"></span>
<ul class="nav_list">
<li>Services</li>
<li>About us</li>
<li>Pricing</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
Try adding the last line to your nav_list (padding-left:0 is needed):
.nav_list {
text-align: center;
display: none;
margin-top: 60px;
padding-left:0;
}
JS Fiddle
You should add a padding of 0 to the ul element. Padding: 0 or padding-left: 0 should do it.
.nav_list {
padding: 0;
}
Lists automatically have padding to the left;

Categories