This is my html and JavaScript code I want help in this task, After I go back and forth into the submenus several times, the padding gets messed up for the elements and the icons get cut off.
Some times it work properly but when I click back arrow very quickly Its messed the paddings.
I am sharing screenshot also.
$(document).ready(function() {
// Variable declaration...
var left, width, newLeft;
// Add the "top-menu" class to the top level ul...
$('.mobile-menu').children('ul').addClass('top-menu');
// Add buttons to items that have submenus...
$('.has_child_menu').append('<button class="arrow"><i class="fa fa-chevron-right"></i></button>');
// Mobile menu toggle functionality
$('.menu-toggle').on('click', function() {
// Detect whether the mobile menu is being displayed...
display = $('.mobile-menu').css("display");
if (display === 'none') {
// Display the menu...
$('.mobile-menu').css("display", "block");
} else {
// Hide the mobile menu...
$('.mobile-menu').css("display", "none");
// and reset the mobile menu...
$('.current-menu').removeClass('current-menu');
$('.top-menu').css("left", "0");
$('.back-button').css("display", "none");
}
});
// Functionality to reveal the submenus...
$('.arrow').on('click', function() {
// The .current-menu will no longer be current, so remove that class...
$('.current-menu').removeClass('current-menu');
// Turn on the display property of the child menu
$(this).siblings('ul').css("display", "block").addClass('current-menu');
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left - width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Also display the "back button" (if it is hidden)...
if ($('.back-button').css("display") === "none") {
$('.back-button').css("display", "flex");
}
});
// Functionality to return to parent menus...
$('.back-button').on('click', function() {
// Hide the back button (if the current menu is the top menu)...
if ($('.current-menu').parent().parent().hasClass('top-menu')) {
$('.back-button').css("display", "none");
}
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left + width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Allow 0.25 seconds for the css transition to finish...
window.setTimeout(function() {
// Hide the out-going .current-menu...
$('.current-menu').css("display", "none");
// Add the .current-menu to the new current menu...
$('.current-menu').parent().parent().addClass('current-menu');
// Remove the .current-menu class from the out-going submenu...
$('.current-menu .current-menu').removeClass('current-menu');
}, 250);
});
});
body {
margin: 0px;
padding: 0px;
font-family: 'Segoe UI';
}
.smart-list-container {
max-width: 95%;
margin: 10px auto;
}
.smart-list-header {
background: #265a88;
padding: 10px 0px;
}
.current-page-title {
text-align: center;
}
.current-page-title h3 {
color: #fff;
margin: 0px;
}
.smart-row {}
.smart-list-icon {
float: left;
width: 60px;
}
.smart-list-icon .fa {
font-size: 35px;
padding-right: 20px;
}
.smart-descrption {
float: right;
width: calc(100% - 60px);
}
.smart-text {
float: left;
}
.smart-text h3 {
margin: 0;
}
.smart-right-btn {
float: right;
}
.smart-right-btn .fa {
font-size: 28px;
}
.sub-list {
display: none;
}
.slide-smart-page {
left: -100%;
position: absolute;
transition: 0.5s all ease;
}
body .slide-smart-sub-page {
display: block;
}
.sub-list {
background: #2196F3;
height: 300px;
}
/*******switch-btn*******/
.smart-right-btn .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-bottom: 0px;
}
.smart-right-btn .switch input {
display: none;
}
.smart-right-btn .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn input:checked+.slider {
background-color: #2196F3;
}
.smart-right-btn input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
.smart-right-btn input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.smart-right-btn .slider.round {
border-radius: 34px;
}
.smart-right-btn .slider.round:before {
border-radius: 50%;
}
/*******switch-btn-end*******/
.smart-list-container .mobile {
background: #fff;
overflow: hidden;
/* NB: Remove this overflow property if you want to get a better idea of what is happening "under the hood" */
position: relative;
}
.smart-list-container .mobile-controls {
background: #337ab7;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 10px;
}
.smart-list-container .mobile-controls button {
background: none;
border: none;
border-radius: 8px;
color: #fff;
height: 40px;
padding: 0 15px;
outline: none;
font-size: 18px;
}
.smart-list-container button:hover {
cursor: pointer;
}
.smart-list-container .mobile-controls .back-button {
display: none;
}
.smart-list-container .mobile-menu {
background: #fff;
display: none;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 10;
}
.smart-list-container ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;
transition: 0.25s;
}
.smart-list-container li {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
list-style: none;
}
.smart-list-container li a {
color: #000;
flex: 3;
padding: 10px 10px;
text-decoration: none;
}
.smart-list-container li button {
background: none;
border: 0;
flex: 1;
text-align: right;
padding: 10px;
}
.smart-list-container div>ul {
top: 0;
left: 0;
}
.smart-list-container div>ul ul {
display: none;
top: 0;
left: 100%;
}
/* Content styles below here */
.smart-list-container section {
line-height: 1.5;
padding: 20px;
}
.smart-list-container h1 {
font-size: 1.5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smart-list-container">
<div class="mobile">
<div class="mobile-controls">
<button class="menu-toggle">Page Name</button>
<button class="back-button"><i class="fa fa-chevron-left"></i></button>
</div>
<div class="mobile-menu">
<ul>
<li>
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="smart-right-btn">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
</li>
<li class="has_child_menu">
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
<ul>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<section>
<article>
<h1>Mobile menu demo</h1>
<p>Click the button above to see the mobile menu in action!</p>
<p>The menu functionality was inspired by the Settings app in iOS.</p>
<p>This implementation uses some jQuery and flexbox. The orginal code was written for a WordPress theme, so absolute positioning was used (rather than fixed positioning - which is easier) to avoid conflicts with the admin bar (when the user is logged-in).</p>
</article>
</section>
</div>
</div>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Do transition: 0.15s; instead of transition: 0.25s; in css file.
Related
I have a home page with a responsive navbar. When you shrink the size of the window, it collapses into a burger for mobile/tablet, which then shows the menu options vertically down the right-hand side of the page.
The home page also has an image slide show that runs automatically that is in the centre of the page.
When the window size reduces i.e to mobile size and it collapses into a burger, I can't see some of the menu options over the image slide show. Any ideas on how to accomplish this? I am a newbie to HTML, CSS & also JS... any help much appreciated (:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/style.css" rel = "stylesheet" type="text/css" >
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#300&display=swap" rel="stylesheet">
<script> src="app.js"</script>
<title>Rogue Concept</title>
</head>
<body>
<!-- Navigation Menu Bar-->
<nav>
<div class="logo">
<h4>Rogue Concept</h4>
</div>
<ul class="nav-links">
<li>Home
</li>
<li>
About Us
</li>
<li>
Restoration
</li>
<li>
Hire
</li>
<li>
Contact Us
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<!--image slider start-->
<div class="slider">
<div class="slides">
<!--radio buttons start-->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!--radio buttons end-->
<!--slide images start-->
<div class="slide first">
<img src="assets/img/grant-ritchie-j0YPbvXu4t0-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/grant-ritchie-jYk96oRbPwg-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/jan-de-keijzer-8eudveAaeFU-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/jon-flobrant-lRSChvh1Mhs-unsplash.jpeg" alt="" class="center">
</div>
<!--slide images end-->
<!--automatic navigation start-->
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div>
<!--automatic navigation end-->
</div>
<!--manual navigation start-->
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>
<!--manual navigation end-->
</div>
<!--image slider end-->
<script src="assets/app.js"></script>
</body>
</html>
style.css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* Navigation Tool Bar Start */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: whitesmoke;
font-family: 'Oswald', sans-serif;
}
.logo {
color: black;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
/* Navigation Tool Bar End */
/* Mobile Nav Tool Bar Start */
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color : black;
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: whitesmoke;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
.nav-active {
transform: translateX(0%);
}
}
/* Mobile Nav Tool Bar End */
/* Animation Start */
#keyframes navLinkFade{
from{
opacity: 0;
transfrom: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg)translate(-5px,-6px);
}
.slider {
width: 800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slides {
width: 500%;
height: 500px;
display: flex;
}
.slides input{
display: none;
}
.slide {
width: 20%;
transition: 2s;
}
.slide img {
width: 800px;
height: 500px;
}
/*css for manual slide navigation*/
.navigation-manual {
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn {
border: 2px solid whitesmoke;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}
.manual-btn:not(:last-child) {
margin-right: 40px;
}
.manual-btn:hover {
background: whitesmoke;
}
#radio1:checked ~ .first {
margin-left: 0;
}
#radio2:checked ~ .first {
margin-left: -20%;
}
#radio3:checked ~ .first {
margin-left: -40%;
}
#radio4:checked ~ .first {
margin-left: -60%;
}
/*css for automatic navigation*/
.navigation-auto {
position: absolute;
display: flex;
width: 800px;
justify-content: center;
margin-top: 460px;
}
.navigation-auto div {
border: 2px solid whitesmoke;
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not(:last-child) {
margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1 {
background: whitesmoke;
}
#radio2:checked ~ .navigation-auto .auto-btn2 {
background: whitesmoke;
}
#radio3:checked ~ .navigation-auto .auto-btn3 {
background: whitesmoke;
}
#radio4:checked ~ .navigation-auto .auto-btn4 {
background: whitesmoke;
}
app.js
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click',() => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
You can use Z-index in CSS for superimpose elements.
Example:
nav{
z-index: 1000;
}
I am using Jquery to show project categories and filter the projects by which category is selected.
View the code pen here: https://codepen.io/saintasia/pen/dzqZov
HTML:
<body>
<div class="container">
<nav>
<ul>
<li class="current">All projects</li>
<li>Front-end</li>
<li>Back-end</li>
<li>Apps</li>
<li>Design</li>
<li>Testing Testing Testing</li>
</ul>
</nav>
<div id="projects">
<h1 class="heading">All Projects</h1>
<ul id="gallery">
<li class="design"><img src="https://source.unsplash.com/jjtdL443L4w/700x700"></li>
<li class="apps"><img src="https://source.unsplash.com/y1yQQmozTBw/700x700"></li>
<li class="back-end"><img src="https://source.unsplash.com/b18TRXc8UPQ/700x700"></li>
<li class="apps design"><img src="https://source.unsplash.com/klRB1BB9pV8/700x700"></li>
<li class="front-end testing-testing-testing back-end"><img src="https://source.unsplash.com/y1yQQmozTBw/700x700"></li>
<li class="front-end design"><img src="https://source.unsplash.com/1vwwZ-BmmrE/700x700"></li>
<li class="apps"><img src="https://source.unsplash.com/WLOCr03nGr0/700x700"></li>
<li class="back-end"><img src="https://source.unsplash.com/iOykDIkZLQw/700x700"></li>
</ul>
</nav>
</div>
<!-- modal gallery -->
<div class="gallery">
<a class="close" href="#">
<i>
<span class="bar"></span>
<span class="bar"></span>
</i>
</a>
<img src="">
</div>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
}
body {
color: #333;
font-size: 13px;
background: #f4f4f4;
font-family: sans-serif;
overflow:auto;
}
.container {
width: 90%;
max-width: 960px;
margin: 30px auto;
position: relative;
text-align: center;
}
h1 {
margin-bottom: 20px;
text-transform: uppercase;
color: #F39CC3;
}
nav {
display: block;
width: 100%;
}
ul {
list-style: none;
margin-bottom: 20px;
}
nav > ul > li {
display: inline-block;
}
nav > ul > li > a {
text-transform: uppercase;
padding: 4px 10px;
margin-right: 2px;
margin-left: 2px;
text-decoration: none;
color: #27A4DD;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 25px;
border: 1px solid #27A4DD;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.hidden {
display: none;
}
nav > ul > li > a:hover, .current a {
color: #fff;
background-color: #27A4DD;
}
#projects > ul > li {
display: inline-block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
width: 23%;
height: auto;
cursor: pointer;
border-radius: 5px;
/* Padding stays within the width */
box-sizing: border-box;
position: relative;
opacity: 0.7;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#projects > ul > li:hover {
opacity: 1;
}
img {
max-width: 100%;
border-radius: 5px;
}
.gallery {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
padding: 40px 10px;
display: none;
box-sizing: border-box;
}
.gallery > img {
max-height: 100%;
width: auto;
}
.close i {
position: fixed;
top: 10px;
right: 10px;
height: 30px;
width: 30px;
}
.bar {
display: block;
position: absolute;
top: 13px;
float: left;
width: 30px;
border-bottom: 4px solid #fff;
transform: rotate(45deg);
}
.bar:first-child {
transform: rotate(-45deg);
}
#media (max-width: 768px){
#projects > ul > li {
width: 48%;
}
}
#media (max-width: 568px) {
#projects > ul > li {
width: 100%;
}
}
JS:
$(document).ready(function(){
// filter
$('nav a').on('click', function(event){
event.preventDefault();
// current class
$('nav li.current').removeClass('current');
$(this).parent().addClass('current');
// set new heading
$('h1.heading').text($(this).text());
// filter link text
var category = $(this).text().toLowerCase().replace(' ', '-');
// remove hidden class if "all" is selected
if(category == 'all-projects'){
$('ul#gallery li:hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#gallery li').each(function(){
if(!$(this).hasClass(category)){
$(this).hide().addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
// lightbox
$('ul#gallery a').on('click', function(event){
event.preventDefault();
var link = $(this).find('img').attr('src');
$('.gallery img').attr('src', '');
$('.gallery img').attr('src', link);
$('.gallery').fadeIn('slow');
});
// close lightbox
$('.gallery').on('click', function(event){
event.preventDefault();
$('.gallery').fadeOut('slow');
});
});
The problem I am having is that if a category is more than 2 words, it doesn't show the projects with that category. You'll see in the code pen that there is a category called "Testing Testing Testing" and one of the projects has that category assigned to it. But, when you click the Testing Testing Testing category, no projects show up. All of the other categories work however, because they are all only 2 words long.
Any help is greatly appreciated!
Your code break because the .replace(' ', '-') code just replace the first space
if you want to change all space with '-', you should change this code
var category = $(this).text().toLowerCase().replace(' ', '-');
to this
var category = $(this).text().toLowerCase().split(' ').join('-');
I'm doing a custom drop-down navigation but when it toggles the logo, in this codepen represented by the blue div, goes to the bottom of the navigation. I've been trying to work around this for a while now and would appreciate any help.
Here is my code:
HTML
<div class='container-fluid nav'>
<div class='container'>
<div class = 'nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class = 'nav__btn bar1'></div>
<div class = 'nav__btn bar2'></div>
<div class = 'nav__btn bar3'></div>
</div>
<ul class = "nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class='nav__brand u-inlineBlock'>
logo
</div>
</div>
</div>
CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child{
border-bottom: none;
}
.nav__dropdown li:hover{
background: black;
color: seashell
}
.u-inlineBlock {
display: inline-block;
}
JS
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
After this, I'll try to add a sub menu on the right side, so if you could point me in the right path for that as well that would be great
(Notice that this is just a bonus for me, I don't care if you don't help me with that so don't downvote for being too broad or something like that. I also saw some similar questions but they did not help)
Thanks in advance!
Just move the logo before the ul, and remove the margin-top from the ul. And if you want the toggle button and submenu to be flush with the white header, remove .nav { height: 75px; }
function animateNavbarToggle(x) {
x.classList.toggle("toggled");
}
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
background-color: pink;
height: 2000px;
}
/*------------------------------------*\
#NAVIGATION
\*------------------------------------*/
.nav {
background-color: white;
height: 75px;
}
.nav__brand {
height: 68px;
width: 227px;
background-color: lightblue;
text-align: center;
}
/**
* Navigation dropdown button
*/
.nav__btn {
width: 22PX;
height: 3px;
background-color: black;
margin: 4px 0;
}
.nav__btn--toggle {
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 22PX;
height: 3px;
background-color: coral;
margin: 4px 0;
transition: 0.4s;
}
/* Rotate first bar */
.toggled .bar1 {
-webkit-transform: rotate(-45deg) translate(-5px, 5px);
transform: rotate(-45deg) translate(-5px, 5px);
}
/* Fade out the second bar */
.toggled .bar2 {
opacity: 0;
}
/* Rotate last bar */
.toggled .bar3 {
-webkit-transform: rotate(45deg) translate(-4px, -4px);
transform: rotate(45deg) translate(-4px, -6px);
}
/**
* Navigation Dropdown
*/
.nav__dropdown {
padding-left: 0;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child {
border-bottom: none;
}
.nav__dropdown li:hover {
background: black;
color: seashell;
}
/*------------------------------------*\
#UTILITIES
\*------------------------------------*/
.u-inlineBlock {
display: inline-block;
}
.u-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class='container-fluid nav'>
<div class='container'>
<div class='nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class='nav__btn bar1'></div>
<div class='nav__btn bar2'></div>
<div class='nav__btn bar3'></div>
</div>
<div class='nav__brand u-inlineBlock'>
logo
</div>
<ul class="nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
try adding position: fixed to your nav__dropdown CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
position: fixed;
}
Position fixed essentially removes the content from the flow of the document window, which makes it not cause any interactions with your logo.
More on position fixed here
I have created Menu bar and menu icon
What i am trying to do is when hover on menu icon the menu bar should be toggled from left side but it is not working so please help me to do it...
follow the link to Codepen.io
Following is My code
body {
background-color: #F2D7EE;
margin: 0;
padding: 0;
}
.menuico {
background-color: black;
cursor: pointer;
width: 20px;
height: 4px;
margin: 2px;
position: relative;
left: 170px;
z-index: 1;
}
.navmenu {
position: fixed;
background-color: #0E103D;
height: 100%;
//width: 0px;
width: 150px;
color: #F2D7EE;
font-size: 25px;
}
.nav {
margin: 5px;
margin-top: 10px;
}
.mainMenu {
margin-top: 70px;
}
.mainMenu:hover {
cursor: pointer;
}
.menuico:hover .navmenu {
width: 150px;
display: block;
transition: 1s;
}
<div class="navmenu">
<div class="menuico"></div>
<div class="menuico"></div>
<div class="menuico"></div>
<div class="nav">
<div class="mainMenu">AboutMe</div>
<div class="mainMenu">contact-us</div>
<div class="mainMenu">Project</div>
<div class="mainMenu">Blog</div>
<div class="mainMenu">More</div>
</div>
</div>
You can not control ANY element on others hover, only those which are inside the element or after it.
.menu {
width:20%;
left:-20%;
height:100%;
position:fixed;
background-color:red;
transition: left 0.5s ease-in-out;
}
.icon:hover + .menu {
left:0%
}
<div class="icon">icon</div>
<div class="menu"></div>
I have a demo website. how can I get the menu hover effect as in the reference website given below. I have fiddled little bit here, but I didn't get the transition when I hover on the menu item
ref site :- click here
hover on the top menu and see the effect. how do I get that effect ?
see the code here till I have done
HTML
<li>
<div class="header-navigation-item-state-wrapper">
<div class="white">
<h4 class="header-white">Collections</h4>
</div>
<div class="black">
<h4 class="header-black">Collections</h4>
</div>
</div>
</li>
CSS
* {
background:yellow
}
li {
list-style:none;
}
.header-black {
background:#000;
color:#fff;
padding:10px;
display:block
}
.black {
display:none;
}
.header-white {
background:#fff;
color:#000;
padding:10px;
display:block
}
JQuery
$(document).ready(function () {
$("li").mouseenter(function () {
$(".white").css('display', 'none');
$(".black").css('display', 'block');
});
$("li").mouseleave(function () {
$(".white").css('display', 'block');
$(".black").css('display', 'none');
});
})
You can use 3d effect following way.
.menu li {
display: inline-block;
}
.menu li a {
color: #fff;
display: block;
text-decoration: none;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.threed {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.threed:hover .box,
.threed:focus .box {
transform: translateZ(-25px) rotateX(90deg);
}
.box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.white {
transform: rotatex(0deg) translatez(25px);
background: white;
color: black;
}
.black {
transform: rotatex(-90deg) translatez(25px);
color: white;
background: black;
}
.white, .black {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 15px 10px;
pointer-events: none;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="menu">
<li><a href="/" class="threed">
Home
<span class="box">
<span class="white">Home</span>
<span class="black">Home</span>
</span>
</a></li>
</ul>
You can change as per your requirement.
Hope it helps.