I have a requirement where I need to have a navigation bar on mobile view which displays a few links. These links are parent pages and will need to display the child pages underneath them on click. I need the parent menu to be hidden while the child sub menus are shown. On clicking a back button, need to show the parent menu links. Can anyone give me some ideas on how to implement this.
I've created the pages as a LI under a UL and added new UL under a LI to create a child page list.
<nav>
<ul>
<li>
<a>A</a>
<ul>
<li>
<a>aa</a>
<a>ab</a>
<a>ac</a>
</li>
</ul>
</li>
</ul>
</nav>
So my requirement is to show aa,ab,ac when A is clicked and hide the menu showing A and just shown aa,ab and ac. When back button is clicked, I need to show menu with A and hide menu with aa,ab and ac
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Bring
Deliver
Package
Express
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
Contact
</div>
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
</body>
</html>
Related
i am new to HTML and CSS so im still learning the ropes.
I would like to place my sidebar navigation links and icons in the centre of my navigation bar, as well as allow my navigation bar to turn into a drop-down menu once the site is opened on a smaller screened device. Also if you see any errors in my code or any way I can improve it please feel free to let me know, any advice would be very appreciated
<body>
<header>
<div id="Sidebar">
<div class="nav-links">
<h2>Omar Mahmoud</h2>
<ul>
<li>
<em class="fa-solid fa-house"></em> Home
</li>
<li>
<a href="about-me"
><em class="fa-solid fa-user"></em> About Me</a
>
</li>
<li>
<a href="what-i-do"
><em class="fa-solid fa-user"></em> What I do</a
>
</li>
<li>
<a href="portfolio"
><em class="fa-solid fa-briefcase"></em> Portfolio</a
>
</li>
<li>
<a href="contact"
><em class="fa-solid fa-address-card"></em> Contact</a
>
</li>
</ul>
<div class="social-media">
<em class="fa-brands fa-linkedin"></em>
<em class="fa-brands fa-github"></em>
</div>
</div>
</div>
</header>
</body>
h2 {
font-family: "Alegreya Sans SC", sans-serif;
font-size: 30px;
}
.nav-links {
font-family: "Heebo", sans-serif;
}
.fa-brands {
color: white;
}
.fa-brands:hover {
color: blue;
}
{
margin: 0;
padding: 0;
}
header {
position: fixed;
width: 10%;
height: 100%;
background-color: black;
}
li,
a {
text-decoration: none;
font-size: 20px;
}
.nav-links {
list-style: none;
}
.nav-links li {
list-style: none;
padding-top: 15px;
margin-top: 5%;
margin-left: 25%;
}
.nav-links li a {
color: White;
}
.nav-links li a:hover {
color: Blue;
}
.social-media:hover {
color: red;
}
.social-media {
display: block;
}
.social-media {
margin-top: 40px;
margin-left: 35%;
}
I would suggest starting by removing
margin-left: 25%;
from the ".nav-links li" selector css.
I would continue by considering a fixed width for your sidebar. This will make it easier to find a solution for centering the nav-links.
I would also consider using flex https://www.w3schools.com/cssref/css3_pr_flex.asp to arrange the links.
How to have more than one subnav in bootstrap 4 navbar?
I have the following code W3Schools
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Bring
Deliver
Package
Express
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
Contact
</div>
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
</body>
</html>
I'd like to add another arrow down (fa-caret) to About->Company. For example About->Company->Admin, Accounting, Etc
I tried to add a class="subnav-content" inside the other class="subnav-content" but it don't work. How to Nest class="subnav"?
I'd like something like this
with the second horizontal line with Admin, Accounting, Etc visible only when I click on the + of Company.
I tried to modify the code as follow but the second horizontal line with Admin, Accounting, Etc is always visible
<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<button class="subnavbtn">Company <i class="fa fa-plus-square "></i></button>
<div class="subnav-content">
Admin
Accounting
Etc
</div>
Team
Careers
</div>
<!Doctype html>
<html>
<body>
<style>
#nav {
list-style: none inside;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
display: block;
position: relative;
float: left;
background: #24af15;
/* menu background color */
}
#nav li a {
display: block;
padding: 0;
text-decoration: none;
width: 200px;
/* this is the width of the menu items */
line-height: 35px;
/* this is the hieght of the menu items */
color: #ffffff;
/* list item font color */
}
#nav li li a {
font-size: 80%;
}
/* smaller font size for sub menu items */
#nav li:hover {
background: #003f20;
}
/* highlights current hovered list item and the parent list items when hovering over sub menues */
#nav ul {
position: absolute;
padding: 0;
left: 0;
display: none;
/* hides sublists */
}
#nav li:hover ul ul {
display: none;
}
/* hides sub-sublists */
#nav li:hover ul {
display: block;
}
/* shows sublist on hover */
#nav li li:hover ul {
display: block;
/* shows sub-sublist on hover */
margin-left: 200px;
/* this should be the same width as the parent list item */
margin-top: -35px;
/* aligns top of sub menu with top of list item */
}
</style>
</head>
<ul id="nav">
<li>Main Item 1</li>
<li>Main Item 2
<ul>
<li>Sub Item</li>
<li>Sub Item</li>
<li>SUB SUB LIST »
<ul>
<li>Sub Sub Item 1
<li>Sub Sub Item 2
</ul>
</li>
</ul>
</li>
<li>Main Item 3</li>
</ul>
</body>
</html>
My navbar is disappearing every time I try the position:fixed. I've gone through similar questions and I still can't figure it out. For that matter, the only position that is working is the position:static, all the other ones will mess up the dropdown bar or just won't show up. I'm basically just trying to make a sticky header.
.navbar {
overflow: hidden;
background-color: white;
padding: 20px 10px;
width:100%;
height: 74px;
}
/* Style the header links */
.navbar a {
float: left;
color: #9c9c9c;
text-align: center;
padding: 12px 20px;
text-decoration: none;
font-size: 20px;
line-height: 25px;
}
/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.navbar a.logo {
font-size: 25px;
font-weight: bold;
}
.dropdown:hover .dropbtn {
border-bottom: 5px solid #002873;
}
/* Float the link section to the right */
.navbar-right {
float: right;
}
.navbar-icon {
float: right;
padding: 1px;
}
/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
text-align: left;
}
.navbar-right {
float: none;
}
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
background-color: inherit;
font-family: inherit;
margin: 0px;
padding: 0px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
z-index: 1;
margin: 0px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
color: black;
border-bottom: 0px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<div class="navbar">
<a href="home.html" class="title" style="font-weight:bolder; font-size:40px; color:#002873" > ExhibitLab </a>
<div class="navbar-right">
<div class="dropdown">
<button class="dropbtn"> About </button>
<div class="dropdown-content">
History
Timeline
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Publication </button>
<div class="dropdown-content">
Report
Additional Sources
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Research </button>
<div class="dropdown-content">
Thesis
Context
Global Implications
Mathematical Proof
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Model </button>
<div class="dropdown-content">
2D Model
SketchUp Model
Economic Model
Environmental Model
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Exhibit </button>
<div class="dropdown-content">
Preview
Location
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Media</button>
<div class="dropdown-content">
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Team</button>
<div class="dropdown-content">
Leading Professor
PhD Students
Grad Researchers
Undergrad Researchers
Additional Support
</div>
</div>
<div class = "navbar-icon">
mail_outline
<a href="#search" class="material-icons" style="font-size:20px" >search</a>
</div>
</div>
</div>
</header>
Bootstrap provides a class for fixing your navbar at the top of your screen 'navbar-fixed-top'.
<nav class="navbar navbar-default navbar-fixed-top"><div class="container"></div></nav>
https://getbootstrap.com/docs/3.4/components/#navbar-fixed-top
Try setting the position property in the header element instead the .navbar:
header {
position: fixed;
}
Problem with launching of the dropdown menu
I tried to see if it was possible to use the position or text-align properties of CSS.
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a, .dropdown-content a{
float: right;
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background: red;
color: black;
}
.navbar a:active{
background: green;
color: black;
}
.dropdown-content {
display: none;
background-color: #333;
}
.dropdown-content a:hover {
background-color: red;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class = "navbar">
Page 6
Page 5
Page 4
Page 3
Page 2
<div class="dropdown">
<a class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
<ul>
Link 3
Link 2
Link 1
</ul>
</div>
</div>
</div>
Dropdown menu is opening sideways, to the left of the dropdown button, in the navbar instead of downwards. How to make it go downwards?
Nest your menus and sub menus in an unordered list
<ul id='menu'>
<li><a href='#'>Menu</a>
<ul>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu2</a></li>
<li><a href='#'>Submenu3</a></li>
</ul>
</li>
Check out this JSSfiddle on how to setup the stylesheet.
You need to make the dropdown-content absolutely positioned and allow overflow on the navbar. So, your css should look something like this:
.navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.dropdown {
position: relative;
float: right;
}
.navbar a{
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar > a, .dropbtn {
float: right;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background: red;
color: black;
}
.navbar a:active{
background: green;
color: black;
}
.dropdown-content {
position: absolute;
top: 100%;
display: none;
background-color: #333;
}
.dropdown-content a {
display: block;
}
.dropdown-content a:hover {
background-color: red;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class = "navbar">
Page 6
Page 5
Page 4
Page 3
Page 2
<div class="dropdown">
<a class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Link 3
Link 2
Link 1
</ul>
</div>
</div>
</div>
Here is a fiddle with the results: https://jsfiddle.net/dLmr7wbk/
IssueTo make my website responsive for mobile layout, I am trying to make the navigation menu appear on clicking the menu button. However, the click is not working and navigation options are not appearing at all. Only the navigation menu icon is appearing. The options are appearing below the menu button separately. However, I want them to appear on clicking the menu icon.
.navbar {
width: 100;
text-align: center;
height: 20px;
padding: 35px;
font-size: 10px;
overflow: hidden;
}
.navbar a {
float: left;
font-size: 18px;
text-align: center;
padding: 12px 16px;
text-decoration: none;
color: #0069BD;
font-family: Helvetica;
}
.navbar .current{
border-bottom: 3px solid #0069BD; /* Showing the border under the navigation option on hover */
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 18px;
border: none;
outline: none;
color: white;
padding: 12px 16px;
background-color: inherit;
font-family: Helvetica;
margin: 0;
color: #0069BD;
}
.navbar a:hover, .dropdown:hover .dropbtn {
border-bottom: 3px solid #00A0EF;
}
.navbar a {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0069BD;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
font-size: 10px;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 17px;
}
.dropdown-content a:hover {
border-bottom: 3px solid #00A0EF;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
color: white;
}
.show {
display: block;
}
.active {
color: white;
}
.content p{
font-size: 13px;
color: #4e5153;
font-weight: normal;
font-family: 'Arial' sans-serif;
line-height: 20px;
display:inline-block;
}
/* Header Logo */
header div.logo {
padding-top: 14px;
padding-right: 24px;
float: left;
border: red;
}
header div.logo a {
width: 216px;
height: 74px;
float: left;
text-indent: -999em;
}
div.page {
min-height: 400px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
}
<html><!-- head --><head profile="http://www.w3.org/2005/10/profile"> <!-- image displayed on the tab alongwith the title-->
<link rel="icon" type="image/png" href="images/logo.jpg"> <!-- image displayed on the tab alongwith the title-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- encoding scheme-->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>Marvel Tech</title> <!--title of the tab-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <!--icons used in footer-->
<link rel="stylesheet" href="style.css"> <!--stylesheet Linking-->
<script src="jquery.min.js"></script> <!-- javascript used for slider animation-->
<script type="text/javascript" src="slider.js"></script> <!-- javascript used for slider animation-->
</head>
<!-- Body-->
<body>
<div class="page-wrap">
<!--- Header section -->
<header>
<div class="headercontent">
<div class="logo">
<img src="images/newlogo.jpg" style="height: auto;">
</div>
<!--–– Navigation Bar -->
<div class="navbar">
<a class="current" href="Marvel_Tech.html">Home</a>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
Design
Consulting
R&D
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Software
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
Steam Turbine Design Package
Gas Turbine Design Tools
Power Plant Monitoring
Prognostic System
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
ORC Turbine
Gas Turbine
Saturated Team Turbine
</div>
</div>
About
Contact
<div class="dropdown">
<button class="dropbtn">Language
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
<img src="images/english.png" style="height: auto;"> English
<img src="images/chinese.png" style="height: auto;"> Chinese <!--- Mention the name of chinese page in place of hash.-->
</div>
</div>
</div>
</div>
</header></div>
<div class="mobilenavbtn">
<div class="content">
<img src="images/mobilenavbtn.png" alt="Menu" style="height: auto;">
</div>
</div>
</body>
</html>
Step 1) Create HTML:
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
Step 2) Create CSS:
/* 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: center;
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 an active class to highlight the current page */
.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}