I'm trying to make a nav bar I found on CodePen, but the problem is it doesn't have a dropdown menu. I know how to make a dropdown menu, but don't know how to position and style it as of now. I'm still fairly new to CSS.
Any help is very much appreciated, thank you!
If the code is not responsive, here's the original.
https://codepen.io/WebDevSimplified/pen/LqKQRK
<nav class="navbar">
<a div class="brand-title" href="submissions.html">AESTHETIC PRESS</a></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li> Books</li>
<ul>
<li>Young Adult</li>
<li>Adult</li>
<li>Non-Fiction</li>
</ul>
</li>
<li>Author</li>
<li>About Us</li>
<ul>
<li>Our Team</li>
</ul>
</li>
<li>News</li>
<li>Contact Us <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Submissions</li>
<li>Permissions</li>
<li>Translation</li>
<li>Press</li>
<li>Hiring</li>
<li>Contact</li>
</ul>
</li>
</div>
</nav>
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
height: 100px;
}
.brand-title {
text-decoration: none;
color: white;
font-size: 2.0rem;
margin: 1.5rem;
cursor: pointer;
}
.brand-title:hover {
color: white;
}
.navbar-links {
padding: 0px;
margin-right: 35%;
border: red dotted 3px;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
I guess you want nested dropdown in navigation link. Also you can use bootstrap navbar or w3school navbar.
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
.navigation {
height: 70px;
background: #262626;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a, .brand a:visited {
color: #fff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #fff;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
background: #2581dc;
color: #fff;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #fff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Logo
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Pricing
</li>
<li>
Portfolio
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</section>
<article>
<h2>Navigation</h2>
<p>Responsive Dropdown Navigation Bar.</p>
</article>
Accordingly to your reply to my comment I have added some code to yours.
So please check the code from https://codepen.io/13rpsingh/pen/poajyXK
window.addEventListener("load", ()=>{
let toggleButton = document.querySelector(".toggle-button");
let navbarLinks = document.querySelector(".navbar-links");
toggleButton.addEventListener('click', (e)=>{
if(navbarLinks.classList.contains("active")){
navbarLinks.classList.remove("active")
toggleButton.classList.remove("active")
}else{
navbarLinks.classList.add("active")
toggleButton.classList.add("active")
}
})
let menuDropDown = document.querySelector(".navbar-links ul li ul");
let dropDownTrigger = document.querySelector("#dropdown-trigger");
if(dropDownTrigger){
dropDownTrigger.addEventListener('click', (e) =>{
if(menuDropDown.style.display == "flex"){
menuDropDown.style.display = "none";
}else{
menuDropDown.style.display = "flex";
}
})
}
})
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
height: max-content;
max-width:100%;
}
.brand-title {
text-decoration: none;
color: white;
font-size: 2.0rem;
margin: 1.5rem;
cursor: pointer;
}
.brand-title:hover {
color: white;
}
.navbar-links {
padding: 0px;
margin-right: 35%;
border: red dotted 3px;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.toggle-button .bar{
position: absolute;
transition: all .3s ease-in-out;
}
.toggle-button .bar:nth-of-type(1){
top: 0;
}
.toggle-button .bar:nth-of-type(2){
top: 50%;
transform : translateY(-50%);
}
.toggle-button .bar:nth-of-type(3){
bottom: 0;
}
.toggle-button.active .bar:nth-of-type(1){
top: 50%;
transform: rotate(-45deg) translateY(-50%);
}
.toggle-button.active .bar:nth-of-type(2){
display:none;
}
.toggle-button.active .bar:nth-of-type(3){
bottom: 50%;
transform: rotate(45deg) translateY(50%);
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
position:relative;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
.navbar-links ul li ul{
display:none;
flex-direction: column;
position:absolute;
background:#d0d0d0;
max-width: 100%;
}
.navbar-links ul li ul li a{
color : black;
}
.navbar-links ul li ul li a:hover{
color : white;
}
<nav class="navbar">
<a div class="brand-title" href="submissions.html">AESTHETIC PRESS</a></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li> Books</li>
<ul>
<li>Young Adult</li>
<li>Adult</li>
<li>Non-Fiction</li>
</ul>
</li>
<li>Author</li>
<li>About Us</li>
<ul>
<li>Our Team</li>
</ul>
</li>
<li>News</li>
<li id="dropdown-trigger">Contact Us <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Submissions</li>
<li>Permissions</li>
<li>Translation</li>
<li>Press</li>
<li>Hiring</li>
<li>Contact</li>
</ul>
</li>
</div>
</nav>
Maybe, you can easily understand the code which I added.
I hope It will help
Related
body{
background: #080808;
color: #fff;
}
#header{
width: 100%;
height: 100vh;
background-image: url();
background-position: center;
background-size: cover;
padding-bottom: 50
}
.container{
padding: 10px 10% ;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.logo{
width: 140px;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
position: relative;
text-decoration: none;
color: #fff;
}
nav ul li a::after{
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 0;
height: 3px;
background-color: red;
}
nav ul li a:hover::after{
width: 100%;
}
<div class="container">
<nav>
<img src="" class="logo">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
I want to add a hover effect to the ul li but the code seems not to work.
I think this is how it should be but the css seems not to work for some reason. Thanks anyways
I also tried using the opacity tag but it still doesn't work.
Edit: I have now edit the HTML Code. The problem is that the hover effect doen't appear.
What I want is to make a hover effect for the ul li.
I think that you have to put the text inside the a tags
body{
background: #080808;
color: #fff;
}
#header{
width: 100%;
height: 100vh;
background-image: url();
background-position: center;
background-size: cover;
padding-bottom: 50
}
.container{
padding: 10px 10% ;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.logo{
width: 140px;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
position: relative;
text-decoration: none;
color: #fff;
}
nav ul li a::after{
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 0;
height: 3px;
background-color: red;
transition-duration: 300ms;
}
nav ul li a:hover::after{
width: 100%;
}
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
I'm trying to switch between menus when clicking on the admin or user menu link. How do I make this an animation to make it slideOutLeft for the current menu and then slideInLeft for the next menu? Is there any possible way by using it and not using add class display none or block?
Here's my code:
A little bit messy for the jQuery functions also is there any chance to improve and make it more robust for each functions?
$(document).ready(function () {
// load the functions
switchAdminMenu();
switchUserMenu();
});
function switchAdminMenu() {
$("body").on("click", "#to_admin_menu", function (e) {
$('.user-sidebar').addClass('hide-nav');
$('.admin-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
function switchUserMenu() {
$("body").on("click", "#to_user_menu", function (e) {
$('.admin-sidebar').addClass('hide-nav');
$('.user-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
/*preset*/
.show-nav {display:block !important;}
.hide-nav {display:none !important;}
/*user*/
.user-sidebar {
background: red;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
}
.user-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.user-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.user-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.user-sidebar ul li a:hover {
color: yellow;
}
.switch-btn {
border: 1px solid blue;
padding: 10px;
display:block;
width:100%;
text-align: center;
text-decoration: none;
background: yellow;
color: blue;
box-sizing:border-box;
}
.switch-btn:hover {
background: #fff;
}
.user-sidebar .sidebar-footer {
margin-top: 20vh;
}
/*admin*/
.admin-sidebar {
background: green;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
}
.admin-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.admin-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.admin-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.admin-sidebar ul li a:hover {
color: yellow;
}
.admin-sidebar .sidebar-footer {
margin-top: 20vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--User Sidebar-->
<nav class="user-sidebar show-nav">
<ul>
<li class="active">
<span>User Test 1</span>
</li>
<li>
</i><span>User Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>User Menu</span>
</div>
</nav>
<!--Admin Sidebar-->
<nav class="admin-sidebar hide-nav">
<ul>
<li class="active">
<span>Admin Test 1</span>
</li>
<li>
</i><span>Admin Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>Admin Menu</span>
</div>
</nav>
I hope this is what you're looking for. I've added comments to the CSS where all the animation is defined.
$(document).ready(function() {
// load the functions
switchAdminMenu();
switchUserMenu();
});
function switchAdminMenu() {
$("body").on("click", "#to_admin_menu", function(e) {
$('.user-sidebar').addClass('hide-nav');
$('.admin-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
function switchUserMenu() {
$("body").on("click", "#to_user_menu", function(e) {
$('.admin-sidebar').addClass('hide-nav');
$('.user-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
/*preset*/
/*changing the margin-left*/
.show-nav {margin-left: 0;}
.hide-nav {margin-left: -220px;}
/*user*/
.user-sidebar {
background: red;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
transition: all 700ms; /* Added for animation */
}
.user-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.user-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.user-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.user-sidebar ul li a:hover {
color: yellow;
}
.switch-btn {
border: 1px solid blue;
padding: 10px;
display:block;
width:100%;
text-align: center;
text-decoration: none;
background: yellow;
color: blue;
box-sizing:border-box;
}
.switch-btn:hover {
background: #fff;
}
.user-sidebar .sidebar-footer {
margin-top: 20vh;
}
/*admin*/
.admin-sidebar {
background: green;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
transition: all 700ms; /* Added for animation */
}
.admin-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.admin-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.admin-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.admin-sidebar ul li a:hover {
color: yellow;
}
.admin-sidebar .sidebar-footer {
margin-top: 20vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--User Sidebar-->
<nav class="user-sidebar show-nav">
<ul>
<li class="active">
<span>User Test 1</span>
</li>
<li>
</i><span>User Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>User Menu</span>
</div>
</nav>
<!--Admin Sidebar-->
<nav class="admin-sidebar hide-nav">
<ul>
<li class="active">
<span>Admin Test 1</span>
</li>
<li>
</i><span>Admin Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>Admin Menu</span>
</div>
</nav>
const toggle = document.getElementById('toggle');
window.onclick = function (event) {
if (event.target == toggle) {
toggle.checked = false;
}
};
.navbar {
background-color: #5f686d;
display: flex;
justify-content: flex-end;
position: fixed;
width: 100vw;
z-index: 2;
top: 0;
}
.navbar .desktop {
list-style-type: none;
padding: 0;
display: flex;
margin-left: auto;
margin-top: 10px;
margin-right: 1rem;
margin-bottom: 10px;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
text-transform: capitalize;
}
#logo {
width: 150px;
height: 50px;
margin-top: 15px;
margin-right: 30vw;
margin-left: 2vw;
}
.navbar li img{
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
padding: 0px;
}
/* Dropdown Button */
.dropbtn {
background-color: #5f686d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* 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: #f1f1f1;
min-width: 160px;
border: 1px solid #95bbdf;
z-index: 1;
}
/* 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: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
.navbar ul li i{
font-size: 2rem;
margin-right: 2rem;
}
.navbar ul li div{
padding: 0px !important;
}
.navbar .fa-sort-down{
font-size: 1.5rem;
color: whitesmoke;
}
.navbar ul li ,
.navbar ul li div{
padding: 10px;
color: whitesmoke;
margin: auto;
cursor: pointer;
}
.navbar ul li div:hover{
border: none;
text-decoration: none;
}
.navbar ul li a {
text-decoration: none;
color: white;
border-bottom: 2px solid transparent;
}
.navbar ul li a:hover {
color: #ea4c88;
transition: 200ms ease;
}
.navbar label {
font-size: 40px;
color: whitesmoke;
line-height: 70px;
display: flex;
flex-direction: row;
display: none;
justify-content: flex-end;
}
.navbar #toggle {
display: none;
}
ol {
display: none !important;
background-color: rgb(255, 255, 255);
border: 1px solid black;
border-top: none;
}
ol a{
color: black;
}
ol li:hover a{
color: white;
}
ol li:hover{
background-color: rgb(107, 103, 103);
}
/*navbar media*/
#media screen and (max-width: 1031px) {
.navbar {
align-items: center;
justify-content: center;
}
.navbar ul {
margin-right: auto;
margin-left: auto;
justify-content: space-between;
}
#logo {
margin: auto;
padding-left: 1.5rem;
}
.prof_name{
display: none;
}
}
#media screen and (max-width: 630px) {
.navbar {
flex-direction: column !important;
align-items: center;
justify-content: center;
}
.navbar {
align-items: flex-start;
justify-content: flex-start;
}
#logo {
margin: 0.5rem;
}
.navbar .desktop{
display: none !important;
}
.navbar ol {
flex-direction: column;
width: 100%;
justify-content: flex-start;
}
.navbar ol li {
display: flex;
justify-content: center;
font-size: 1.3em;
margin: 0;
}
.navbar label {
align-self: flex-end;
margin-right: 10px;
display: flex;
cursor: pointer;
color: white;
width: 40px;
position: fixed;
}
#toggle[type=checkbox]:checked ~ ol {
display: block !important;
}
.prof_name{
display: none;
}
}
<nav class="navbar">
<img id="logo"src="../assets/images/logo.png" alt="logo">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
<ul class="desktop">
<li> <i class="fas fa-home" title="Home"></i></li>
<li onclick="toggleDropdown()">
<img src="../assets/images/avatar-1577909__340.png" alt="img_you">
</li>
<div class="dropdown">
<button class="dropbtn">Ayo Alesh |ADMIN. <i class="fas fa-sort-down"></i></button>
<div class="dropdown-content">
Create User
Log out
User
Staff
</div>
</div>
</ul>
<ol>
<li>
Home
</li>
<li>Create User</li>
<li> Log out</li>
<li>User</li>
<li> Staff</li>
</ol>
</nav
I'm using a checkbox to show and hide hamburger navbar on mobile view. I'm trying to make sure that when ever a user clicks anywhere on the screen when the navbar is opened, the checkbox should get checked and navbar should hide. But instead the navbar won't even open,I found out windows.onclick triggers immediately i try to open the navbar.
Try document instead of window. There wasn't any code to hide .navbar and the use of event.target doesn't look like it was needed. event.target references the element that the user clicked which in this situation can be considered anything.
document.onclick = function(event) {
const tog = document.getElementById('toggle');
const nav = document.querySelector('.navbar');
tog.checked = true;
nav.style.display = 'none';
};
.navbar {
background-color: #5f686d;
display: flex;
justify-content: flex-end;
position: fixed;
width: 100vw;
z-index: 2;
top: 0;
}
.navbar .desktop {
list-style-type: none;
padding: 0;
display: flex;
margin-left: auto;
margin-top: 10px;
margin-right: 1rem;
margin-bottom: 10px;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
text-transform: capitalize;
}
#logo {
width: 150px;
height: 50px;
margin-top: 15px;
margin-right: 30vw;
margin-left: 2vw;
}
.navbar li img {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
padding: 0px;
}
/* Dropdown Button */
.dropbtn {
background-color: #5f686d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* 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: #f1f1f1;
min-width: 160px;
border: 1px solid #95bbdf;
z-index: 1;
}
/* 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: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.navbar ul li i {
font-size: 2rem;
margin-right: 2rem;
}
.navbar ul li div {
padding: 0px !important;
}
.navbar .fa-sort-down {
font-size: 1.5rem;
color: whitesmoke;
}
.navbar ul li,
.navbar ul li div {
padding: 10px;
color: whitesmoke;
margin: auto;
cursor: pointer;
}
.navbar ul li div:hover {
border: none;
text-decoration: none;
}
.navbar ul li a {
text-decoration: none;
color: white;
border-bottom: 2px solid transparent;
}
.navbar ul li a:hover {
color: #ea4c88;
transition: 200ms ease;
}
.navbar label {
font-size: 40px;
color: whitesmoke;
line-height: 70px;
display: flex;
flex-direction: row;
display: none;
justify-content: flex-end;
}
.navbar #toggle {
display: none;
}
ol {
display: none !important;
background-color: rgb(255, 255, 255);
border: 1px solid black;
border-top: none;
}
ol a {
color: black;
}
ol li:hover a {
color: white;
}
ol li:hover {
background-color: rgb(107, 103, 103);
}
/*navbar media*/
#media screen and (max-width: 1031px) {
.navbar {
align-items: center;
justify-content: center;
}
.navbar ul {
margin-right: auto;
margin-left: auto;
justify-content: space-between;
}
#logo {
margin: auto;
padding-left: 1.5rem;
}
.prof_name {
display: none;
}
}
#media screen and (max-width: 630px) {
.navbar {
flex-direction: column !important;
align-items: center;
justify-content: center;
}
.navbar {
align-items: flex-start;
justify-content: flex-start;
}
#logo {
margin: 0.5rem;
}
.navbar .desktop {
display: none !important;
}
.navbar ol {
flex-direction: column;
width: 100%;
justify-content: flex-start;
}
.navbar ol li {
display: flex;
justify-content: center;
font-size: 1.3em;
margin: 0;
}
.navbar label {
align-self: flex-end;
margin-right: 10px;
display: flex;
cursor: pointer;
color: white;
width: 40px;
position: fixed;
}
#toggle[type=checkbox]:checked~ol {
display: block !important;
}
.prof_name {
display: none;
}
}
<nav class="navbar">
<img id="logo" src="../assets/images/logo.png" alt="logo">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
<ul class="desktop">
<li>
<i class="fas fa-home" title="Home"></i>
</li>
<li onclick="toggleDropdown()">
<img src="../assets/images/avatar-1577909__340.png" alt="img_you">
</li>
<div class="dropdown">
<button class="dropbtn">Ayo Alesh |ADMIN. <i class="fas fa-sort-down"></i></button>
<div class="dropdown-content">
Create User
Log out
User
Staff
</div>
</div>
</ul>
<ol>
<li>
Home
</li>
<li>Create User</li>
<li> Log out</li>
<li>User</li>
<li> Staff</li>
</ol>
</nav>
I have provided a snippet, however the output is different from here and so please beware. I am trying to achieve where:
When the user clicks 'Home 1' under 'Home', it will be an active element
In addition, when the user clicks 'Home 2', 'Home 1' will be inactive and 'Home 2' will be an active element
Same goes for the 'Pages' dropdown list. May I know what are the solutions?
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i,
span {
display: inline-block;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #6d7fcc;
background: #fff;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3,
#sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
<strong>BS</strong>
</div>
<ul class="list-unstyled components">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
</div>
</div>
</body>
</html>
try this use jquery to control style
https://codepen.io/anon/pen/ZVbVYw
$(document).ready(function () {
$('#homeSubmenu li, #pageSubmenu li').on('click', function () {
$('#homeSubmenu li, #pageSubmenu li').removeClass('active');
$(this).addClass('active');
});
});
Here's the fiddle for my query
https://jsfiddle.net/e7te8hf1/
<section id="action-bar">
<div id="logo">
<img src="img/logo.png">
</div><!-- end logo -->
<nav class="navbar navigation main-navigation">
<ul class='menu main-menu'>
<li class='menu-item'>
<a href="#" class="three-d">
<span title='Women'>Women</span>
</a>
<ul>
<li>
Casuals
<ul>
<li>Tops</li>
<li>Bottoms</li>
<li>Suits</li>
<li>Jumpsuits</li>
</ul>
</li>
<li>Formals</li>
<li>
Prints
<ul>
<li>Stitched</li>
</ul>
</li>
<li>Anokhee</li>
<li>Abbayas</li>
<li>
Accessories
<ul>
<li>Bags</li>
<li>Pouch</li>
<li>Dupatta</li>
<li>Stole</li>
<li>Clutches</li>
</ul>
</li>
</ul>
</li>
<li class='menu-item'>
<a href="#" class="three-d">
<span title='Men'>Men</span>
</a>
<ul>
<li>
Casual
<ul>
<li>Tops</li>
<li>Bottoms</li>
<li>Suits</li>
</ul>
</li>
<li>Formal</li>
</ul>
</li>
<li class='menu-item'><span title='Look Book'>Look Book</span></li>
<li class='menu-item'><span title='Stores'>Stores</span></li>
<li class='menu-item'><span title='Contact'>Contact</span></li>
</ul>
</nav>
</section>
and the CSS is
#action-bar .navbar {
float: left;
}
#action-bar nav ul ul {
display: none;
}
#action-bar nav ul li:hover > ul {
display: block;
}
#action-bar nav ul {
background: #fff;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
margin: 0;
text-align: center;
font-size: 15px;
font-family:'Oswald', sans-serif;
font-weight: bold;
}
#action-bar nav ul:after {
content:"";
clear: both;
display: block;
}
#action-bar nav ul li {
float: left;
}
#action-bar nav ul li:hover {
background: #6f100d;
}
#action-bar nav ul li a {
display: block;
color: #757575;
text-decoration: none;
border-right: 1px solid #E5E5E6;
border-bottom: 1px solid #E5E5E6;
transition: .8s background-color;
}
#action-bar nav ul li a:hover {
color: #fff;
}
#action-bar nav ul ul {
background: #fff;
padding: 0;
position: absolute;
top: 100%;
}
#action-bar nav ul ul li a {
color: black;
}
#action-bar nav ul ul li {
float: none;
position: relative;
}
#action-bar nav ul ul li a {
padding: 15px 40px;
color: black;
}
#action-bar nav ul ul li a:hover {
background: #6ABED6;
color: #fff;
}
#action-bar nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
#action-bar nav ul li:hover > a {
color: #fff;
}
#action-bar #view-cart {
float: right;
display: inline-block;
padding-top: 18px;
padding-left: 5px;
}
#action-bar #user-menu {
display: inline-block;
padding-left: 160px;
}
.menu .menu-item {
display: inline-block;
margin: 0;
padding: 0;
}
.main-menu .menu-item a {
color: #fff;
display: block;
text-decoration: none;
font-family:'Oswald:500', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
background: #fff;
}
.three-d span, .three-d span::before, .three-d span::after {
display: block;
transition: all .3s ease-out;
transform-style: preserve-3d;
}
.three-d {
position: relative;
cursor: pointer;
transition: all .07s linear;
}
.three-d span {
display: block;
padding: 18px 35px;
perspective: -200px;
}
.three-d span::before, .three-d span::after {
padding: 18px 35px;
content: attr(title);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
box-sizing: border-box;
}
.three-d span::before {
transform: rotateX(0deg) translateZ(25px);
}
.three-d span::after {
transform: rotateX(-90deg) translateZ(25px);
background: #6f100d;
color: #f9f9f9;
}
.three-d:hover span, .three-d:focus span {
transform: translateZ(-25px) rotateX(90deg);
}
I want the main-menu to retain the hover style when I hover over the sub-menu, using CSS, but I am unable to achieve that.
Can anyone please help?
Change the last block of CSS...
.three-d:hover span, .three-d:focus span {
transform: translateZ(-25px) rotateX(90deg);
}
to this...
li:hover .three-d span, .three-d:focus span {
transform: translateZ(-25px) rotateX(90deg);
}
and change the rest of your a:hover { selectors to li:hover > a {
JSFIDDLE