I feel like I'm missing quite a bit of information here, how do I get my menu to slide left upon clicking the circle top right? Any help would be appreciated.
https://jsfiddle.net/gehzbpyr/3/
$(document).ready(function() {
$('.nav-icon').on('click', function(e) {
e.preventDefault();
$('.menu').toggleClass('slide-down');
});
});
html,
body {
padding: 0;
margin: 0;
overflow: hidden;
width: 100%;
}
.navigation {
background-color: rgba(255, 255, 255, 0);
height: 100%;
}
.top-navigation {
border: 1px solid black;
width: 100%;
height: auto;
background-color: #fff !important;
}
.menu {
background-color: #ff5f49;
height: 100vh;
/* display: none; */
margin-top: 60px;
top: 0;
left: 0;
}
.menu li {
list-style: none;
}
.menu li a {
text-decoration: none;
color: #efefef;
display: block;
text-align: center;
font-family: 'Changa One';
font-size: 7em;
}
.menu li a:hover {
color: #353c42;
transition: color 0.4s;
}
#logo {
width: 200px;
margin-top: 15px;
position: absolute;
}
.nav-icon {
margin: 10px 20px 10px 0;
float: right;
}
#media (max-width: 802px) {
.menu li a {
font-size: 4em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>KreativeZ | Reinventing the Digital Agency | Taking you to the stars!</title>
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Nanum+Gothic" rel="stylesheet">
</head>
<body>
<nav class="navigation">
<div class="top-navigation">
<a href="#" class="nav-icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="35px" height="35px" viewBox="0 0 105.1 106" style="enable-background:new 0 0 105.1 106;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FF5F49;stroke:#353C42;stroke-width:3;stroke-miterlimit:10;}
</style>
<circle class="st0" cx="55" cy="53.9" r="36.2"/>
</svg>
</a>
<img src="img/KreativeZ_Final_Logo.png" alt="Logo" id="logo">
</div>
<ul class="menu">
<li>Home</li>
<li>Work</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
You can use a transform property to translate the element, and toggle this property in the click event ....
https://jsfiddle.net/RACCH/eu3sht2m/
$(document).ready(function() {
$('.nav-icon').on('click', function(e) {
e.preventDefault();
$('.menu').toggleClass('slide-left');
});
});
CSS
.slide-left{
transform: translateX(-100%);
}
you can even translate in every direction you want....
.slide-left{
transform: translateX(100%);
}
.slide-left{
transform: translateY(-100%);
}
.slide-left{
transform: translateY(100%);
}
To open it from a closed position set the default state as initial...
.menu {
....
transform: translateX(-100%);
}
.slide-left{
transform: translateX(0%);
}
https://jsfiddle.net/RACCH/1yxswomh/1/
First, you need to hide your menu.
Then you can use slideToggle() to achieve this result.
Or if you want to toggle a class, you can use max-height animation, from max-height:0 to max-height:100vh
See below
$(document).ready(function() {
$('.nav-icon').on('click', function(e) {
e.preventDefault();
$('.menu').slideToggle()
});
});
html,
body {
padding: 0;
margin: 0;
overflow: hidden;
width: 100%;
}
.navigation {
background-color: rgba(255, 255, 255, 0);
height: 100%;
}
.top-navigation {
border: 1px solid black;
width: 100%;
height: auto;
background-color: #fff !important;
}
.menu {
background-color: #ff5f49;
height: 100vh;
display: none;
margin-top: 60px;
top: 0;
left: 0;
}
.menu li {
list-style: none;
}
.menu li a {
text-decoration: none;
color: #efefef;
display: block;
text-align: center;
font-family: 'Changa One';
font-size: 7em;
}
.menu li a:hover {
color: #353c42;
transition: color 0.4s;
}
#logo {
width: 200px;
margin-top: 15px;
position: absolute;
}
.nav-icon {
margin: 10px 20px 10px 0;
float: right;
position:Absolute;
right:0;
top:0
}
#media (max-width: 802px) {
.menu li a {
font-size: 4em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav class="navigation">
<div class="top-navigation">
<a href="#" class="nav-icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="35px" height="35px" viewBox="0 0 105.1 106" style="enable-background:new 0 0 105.1 106;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FF5F49;stroke:#353C42;stroke-width:3;stroke-miterlimit:10;}
</style>
<circle class="st0" cx="55" cy="53.9" r="36.2"/>
</svg>
</a>
<img src="img/KreativeZ_Final_Logo.png" alt="Logo" id="logo">
</div>
<ul class="menu">
<li>Home</li>
<li>Work</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
Related
I am coding a very simple HTML CSS program and here is my problem.
I made a picture in id named slider, and I want to write some text into it. And as the tutorial, I wrote a class named text-content in the slider. Very easy to understand, right?
Here is all of my index.html code
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('/assets/css/img/slider/slider1.jpg') top center / cover no-repeat;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<i class="nav-arrow-down ti-arrow-circle-down"></i>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<div class="text-description">We had the best time playing at Venice Beach!</div>
</div>
</div>
<div id="content" style="height: 1000px; background: #ccc;">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
That is all of my code.
Here is the tutorial's picture, as you can see, the text is in the picture
Because when I click on the picture, it said to me that it is in the slider.
As you can see in this picture
I thought that if the picture is in the slider, and the text-content is in the slider, the text-content must in the picture?
My question is, I put class text-content in id slider, but the class text-content is pushed down, as you can see in this picture
Could you please explain this problem to me? Thank you very much for your time.
I assume you want to make a Hero Image. You can move the text position up.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('https://images.unsplash.com/photo-1474692295473-66ba4d54e0d3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=784&q=80') top center / cover no-repeat;
}
#slider .text-content{
position: absolute;
bottom: 25%;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<i class="nav-arrow-down ti-arrow-circle-down"></i>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<p class="text-description">We had the best time playing at Venice Beach!</p>
</div>
</div>
<div id="content" style="height: 1000px; background: #ccc;">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
As you question that you want to create a hero image section and you facing some design issue. so you have to look for CSS properties that should you've to use. If you want a demo section like that then I can suggest you check this manual.
https://www.w3schools.com/howto/howto_css_hero_image.asp
You can redesign your section as you want.
For the #slider div, use display:inline-block:
#slider{display:inline-block}
I just needed help with something, how do I make it for my nav bar to have an image in the profile image?
Image for how I would like it to look:
Image for how I would like it to look (also to make it more clear than vague).
.navbar__link {
position: static;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px;
margin: 20px 0;
border-radius: 10px;
background: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
display: flex;
text-align: center;
display: inline-block;
padding: 20px;
}
}
// you don't need to add class to a tag, it can be selected by following way
.navbar>a {
text-decoration: none;
padding: 15px;
}
.header {
display: flex;
// make the header take all space of body
width: 100%;
}
.navbar {
display: flex;
// make navbar take all space that remains after the logo
flex: 1;
justify-content: center;
// make the navbar move left side else it will not be in complete middlle
transform: translate(-100px);
}
* {
margin: 0;
padding: 0;
}
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.logo {
width: 48px;
height: 48px;
}
.loading-bar {
width: 130px;
height: 2px;
background: #ffffff;
margin-top: 22px;
position: relative;
overflow: hidden;
}
.loading-bar::before {
content: '';
width: 68px;
height: 2px;
background: #000000;
position: absolute;
left: -34px;
animation: blackbar 1.5s infinite ease;
}
#keyframes blackbar {
50% {
left: 96px;
}
}
<body onload="handlePageLoaded()">
<header>
<div style="float: left; padding-right: 10px;">
<img width='200' height='50' src='Icons/Seencast home.png' />
</div>
<div class="navbar" style="justify-content: center;">
<a href="discovery.html" class="navbar__link">
<span class="material-icons">whatshot</span>
</a>
<a href="profile.html" class="navbar__link">
<span class="material-icons">person_outline</span>
</a>
</div>
<!-- Loading Screen -->
<div class="loading-screen">
<div class="loading-animation">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="90px" height="90px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve"> <image id="image0" width="90" height="90" x="0" y="0"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaAQAAAAAQ03yvAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAAmJLR0QAAd2KE6QAAAAJcEhZ
cwAACxMAAAsTAQCanBgAAAAHdElNRQfkBwsBJxoCRYkNAAAAmElEQVQ4y2P4jwAHGEY5w5zzhx2J
8xPO3n+A4TMq5/CP2vYPFfZMzCCO5XOb4vPf54Bkfv6veT/n9/3/d0CcP3Y15+f+ng/h/OdjOCAL
5NyzB3GO1Z//+3v+D3l+EOcZmPP4/mME5/n9zyDOc/vnf3/ffz4fxPl+3u753d/nn8/9PP8Awwf5
Az9kf38oiOE/PBjCbZRDNw4Awv38T7O+5eEAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDctMTFU
MDE6Mzk6MjYrMDM6MDDkTb6MAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTA3LTExVDAxOjM5OjI2
KzAzOjAwlRAGMAAAAABJRU5ErkJggg==" />
</svg>
<div class="loading-bar"></div>
</div>
</div>
</header>
<script>
window.onload = () => {
const loader = document.querySelector('.loading-screen');
loader.style.display = 'none';
}
</script>
</body>
<script>
/* Loading Script */
window.onload = () => {
const loader = document.querySelector('.loading-screen');
loader.style.display = 'none';
}
</script>
</body>
UPDATES will go under here, will be updated every 10 minutes!
ex: [UPDATE 1] EXAMPLE
real: [UPDATE 1] Nothing so far :/.
[UPDATE 2] Nothing so far :/.
So I have a vertical navbar on my project and I think it's almost finalized but when I click on the "hamburger" menu (three lines) the text inside the navbar move in a weird way during the transition from close to open navbar. I would like it to stay still while the navbar opens.
Also I'm using Bootstrap and I would appreciate any help but even more if it can fit any device (responsive) !
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
.nav div {
height: 4px; /*4px*/
background-color: white;
margin : 5px 0;/*5px 0*/
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30px;/*30px*/
display: block;
margin : 1em 0 0 1em;
}
.one {
width: 30px;/*30px*/
}
.two {
width: 25px;/*25px*/
}
.three {
width: 20px;/*20px*/
}
.nav:hover div{
width: 30px;/*30px*/
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition : 0.1s;/*0.3s*/
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.dropdown-toggle::after {
position: relative;
left: 36%;
}
.dropdown-menu {
border: 0;
border-radius: 0;
}
ul {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
padding-left: 0px;
left: 0px;
margin-left: 0px;
}
.mainNav li:hover ul{
display: block;
}
.scroll {
overflow: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title></title>
</head>
<body style="background-color: white;">
<!-- Code du Navbar vertical -->
<div class ="container-fluid" style="background-color: white; margin-top: 0px; margin-bottom: 0px;padding-bottom: 0px;padding-top:0px;overflow-y: auto;" >
<a href="javascript:void(0)" class="nav" onclick="openNav()" draggable ="false">
<div class="one" style="background-color: black;" draggable ="false"></div>
<div class="two" style="background-color: black;" draggable ="false"></div>
<div class="three" style="background-color: black;" draggable ="false"></div>
</a>
<div id="mySidenav" class="sidenav" style="z-index: 3;">
×
<ul class = "mainNav">
<li>Home</li>
<div >
<li>Catalog
<div class="scroll">
<div class ="tops">
<ul>Tops
<li>Tees + Tanks</li>
<li>Graphic Tees</li>
<li>Shirts</li>
<li>Polos</li>
<li>Hoodies + Sweatshirts</li>
<li>Sweaters + Cardigans</li>
</ul>
</div>
<div class="bottoms">
<ul>Bottoms
<li>Jeans</li>
<li>Shorts</li>
<li>Pants</li>
<li>Joggers</li>
<li>Overrall</li>
</ul>
</div>
<div class="S&A">
<ul>Shoes and accessories
<li>Shoes</li>
<li>Sunglasses & Readers</li>
<li>Jewelry</li>
<li>Watches</li>
<li>Socks & Underwear</li>
<li>Hats & Beanies</li>
<li>Bags & Backpacks</li>
</ul>
</div>
<ul>Sales</ul>
</div>
</li>
</div>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</div>
</div>
</body>
</html>
change it like this:
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: -250;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
<script>
function openNav() {
document.getElementById("mySidenav").style.left ="0";
}
function closeNav() {
document.getElementById("mySidenav").style.left ="-250";
}
</script>
you are changing the width while your text font is set to a static number. so while you are changing the width the html is trying to set the text of same length to a different width, and there is nothing to do with it. So instead of changing the width. just create a static "box", put it to the left so it wouldn't be seen, and bring it right after clicking on a button.
It looks like the issue you're having is because the width is gradually increased.
This means that as it grows, the text goes broken over 2 lines on your longer link names. See example in the image below:
There would be a few ways to fix this but I think the simplest would be to add a min-width: 200px; to your .sidenav a selector like so:
.sidenav a {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.1s;
min-width: 200px;
}
See this JS Fiddle for an example
Instead of width you need to set the left position to remove the flickering text issue.
Please refer to the below demo.
Working Demo Code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title></title>
</head>
<style>
/* Code du Navbar à 3 lignes*/
.nav div {
height: 4px;
/*4px*/
background-color: white;
margin: 5px 0;
/*5px 0*/
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30px;
/*30px*/
display: block;
margin: 1em 0 0 1em;
}
.one {
width: 30px;
/*30px*/
}
.two {
width: 25px;
/*25px*/
}
.three {
width: 20px;
/*20px*/
}
.nav:hover div {
width: 30px;
/*30px*/
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: -250px;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.1s;
/*0.3s*/
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.dropdown-toggle::after {
position: relative;
left: 36%;
}
.dropdown-menu {
border: 0;
border-radius: 0;
}
ul {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
padding-left: 0px;
left: 0px;
margin-left: 0px;
}
.mainNav li:hover ul {
display: block;
}
.scroll {
overflow: auto;
}
</style>
<body style="background-color: white;">
<!-- Code du Navbar vertical -->
<div class="container-fluid" style="background-color: white; margin-top: 0px; margin-bottom: 0px;padding-bottom: 0px;padding-top:0px;overflow-y: auto;">
<a href="javascript:void(0)" class="nav" onclick="openNav()" draggable="false">
<div class="one" style="background-color: black;" draggable="false"></div>
<div class="two" style="background-color: black;" draggable="false"></div>
<div class="three" style="background-color: black;" draggable="false"></div>
</a>
<div id="mySidenav" class="sidenav" style="z-index: 3;">
×
<ul class="mainNav">
<li>Home</li>
<div>
<li>Catalog
<div class="scroll">
<div class="tops">
<ul>Tops
<li>Tees + Tanks</li>
<li>Graphic Tees</li>
<li>Shirts</li>
<li>Polos</li>
<li>Hoodies + Sweatshirts</li>
<li>Sweaters + Cardigans</li>
</ul>
</div>
<div class="bottoms">
<ul>Bottoms
<li>Jeans</li>
<li>Shorts</li>
<li>Pants</li>
<li>Joggers</li>
<li>Overrall</li>
</ul>
</div>
<div class="S&A">
<ul>Shoes and accessories
<li>Shoes</li>
<li>Sunglasses & Readers</li>
<li>Jewelry</li>
<li>Watches</li>
<li>Socks & Underwear</li>
<li>Hats & Beanies</li>
<li>Bags & Backpacks</li>
</ul>
</div>
<ul>Sales</ul>
</div>
</li>
</div>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.left = "0px";
}
function closeNav() {
document.getElementById("mySidenav").style.left = "-250px";
}
</script>
</body>
</html>
I am following a tutorial titled 'Responsive HTML & CSS Side Menu From Scratch' by Traversy Media on Youtube (I'd post the link by not enough reputation yet) and I am having a couple of issues with my side-nav. Note the way that it appears before I click on the openSlideMenu() icon on the top left-hand corner versus when I have clicked on it. I have followed the teacher's code to-the-t, yet there appears to be at least 4 problems on the interface.
There is an open tag symbol positioned near the 3-bar icon that remains both when the menu is up and when it is not.
The side-nav, when clicked to open, goes far away from the left side of the page, creating a large whitespace gap between the menu and the left-side of the page, where no gap should exist.
The side-nav goes over the title text 'Responsive Side Menu', thus blocking the 'e Menu' part of the text, whereas the title text should be responsive and move when the side-nav moves, as portrayed in the tutorial.
The closeMenuButton() within the side-nav has its position straight over the elements whereas it should be positioned in the right hand corners.
My HTML/Javascript Code:
function openSlideMenu() {
document.getElementById('side-menu').style.width = '250px';
document.getElementById('side-menu').style.marginLeft = '250px';
}
function closeSlideMenu() {
document.getElementById('side-menu').style.width = '0px';
document.getElementById('side-menu').style.marginLeft = '0px';
}
body {
font-family: "Arial", Serif;
background-color: #f4f4f4;
overflow-x: hidden;
}
.navbar {
background-color: #3b5998;
overflow: hidden;
height: 63px;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar ul {
margin: 8px 0 0 0;
list-style: none;
}
.navbar a:hover {
background-color: #ddd;
color: #000;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
opacity: 0.9;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size: 22px;
color: #ccc;
display: block;
transition: 0.3s;
}
.side-nav a:hover {
color: #fff;
}
.side-nav .btn-close {
postion: absolute;
top: 0;
right: 22px;
font-size: 36px;
margin-left: 50px;
}
# main {
transition: margin-left 0.5s;
padding: 20px;
overflow: hidden;
width: 100%;
}
#media(max-width: 568px) {
.navbar-nav {
display: none
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Document</title>
<link rel="stylesheet" href="style.css" </head>
<body>
<nav class="navbar">
<span class="open-slide">
<a href="#" onClick="openSlideMenu()">
<<svg width="30" height="30">
<path d="M0,5 30,5" stroke=#fff stroke-width="5"/>
<path d="M0,14 30,14" stroke=#fff stroke-width="5"/>
<path d="M0,23 30,23" stroke=#fff stroke-width="5"/>
</svg>
</a>
</span>
<ul class="navbar-nav">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<div id="side-menu" class="side-nav">
×
Home
About
Services
Contact
</div>
<div id="main">
<h1>Responsive Side Menu</h1>
</div>
</body>
</html>
Additionally, the teacher has the code that he produced in the description of his video on Youtube, which you can find as the first result by searching 'Responsive HTML & CSS Side Menu From Scratch'.
The code was full of mistakes
Here is the working code
Find your mistakes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<style media="screen">
body {
font-family: "Arial", Serif;
background-color: #f4f4f4;
overflow-x: hidden;
}
.navbar {
background-color: #3b5998;
overflow: hidden;
height: 63px;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar ul {
margin: 8px 0 0 0;
list-style: none;
}
.navbar a:hover {
background-color: #ddd;
color: #000;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
opacity: 0.9;
overflow-x: hidden;
margin-top: 60px;
transition: 0.5s;
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size: 22px;
color: #ccc;
display: block;
transition: 0.3s;
}
.side-nav a:hover {
color: #fff;
}
.side-nav .btn-close {
position: absolute;
top: 0;
right: 22px;
font-size: 36px;
display: inline;
}
#main {
transition: margin-left 0.5s;
padding: 20px;
overflow: hidden;
width: 100%;
}
.open-slide {
display: none;
}
#media(max-width: 568px) {
.navbar-nav {
display: none
}
.open-slide {
display: inline-block;
}
}
</style>
</head>
<body>
<nav class="navbar">
<span class="open-slide">
<a href="#" onClick="openSlideMenu()">
<<svg width="30" height="30">
<path d="M0,5 30,5" stroke=#fff stroke-width="5"/>
<path d="M0,14 30,14" stroke=#fff stroke-width="5"/>
<path d="M0,23 30,23" stroke=#fff stroke-width="5"/>
</svg>
</a>
</span>
<ul class="navbar-nav">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<div id="side-menu" class="side-nav">
×
Home
About
Services
Contact
</div>
<div id="main">
<h1>Responsive Side Menu</h1>
</div>
<script type="text/javascript">
function openSlideMenu() {
document.getElementById('side-menu').style.width = '250px';
}
function closeSlideMenu() {
document.getElementById('side-menu').style.width = '0px';
document.getElementById('side-menu').style.marginLeft = '0px';
}
</script>
</body>
</html>
I'm making a single page style website and after scrolling 1 px has been scrolled (i.e. the homepage has been passed) I want the navigation bar to appear and stay fixed at the top.
I've tried the .scroll() jQuery and I'm having no luck.
HTML:
<div id="navbar">
<div id="nav-container">
<img id="logonavbar" src="#">
<a id="ABTUS" href="#">ABOUT US</a>
<a id="SRVCS" href="#">SERVICES</a>
<a id="PRTFLO" href="#">PORTFOLIO</a>
<a id="CNTCT" href="#">CONTACT</a>
</div>
</div>
CSS:
#navbar {
width: 100%;
background-color: white;
overflow: auto;
position: fixed;
left: 0px;
top: 0px;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
overflow: hidden;
z-index: 10;
display: none;
}
#nav-container {
max-width: 1200px;
min-width: 700px;
margin: 0 auto;
}
#logonavbar {
float: left;
margin: 0 auto;
width: 125px;
padding: 10px 0 0 0;
}
#nav-container a {
float: right;
display: block;
padding: 25px 15px;
text-decoration: none;
color: black;
font-family: "calibri light", calibri,sans-serif;
font-size: 20px;
transition: background-color 0.5s ease;
}
#nav-container a:hover {
background-color: #f4f4f4;
transition: background-color 0.5s ease;
}
#nav-container a:active {
background-color: #bfbfbf;
}
#nav-container h1:hover {
color: #aaaaaa;
transition: color 0.3s ease;
}
jQuery:
$(document).scroll(function() {
if ($document.scrollTop() >= 50) {
$('#nav-container').css('display': 'inline', 'position': 'fixed');
}
});
Here I have made a simple example of a element that sticks to the top of the page after you scroll over it. Maybe it can help you as well!
http://corexsystems.net/2017/09/08/simple-sticky-menu-in-jquery-css3/
Here is the source of this example!
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">
<script>
$(function(){
var pos = $("#topMenuX").offset().top,
win = $(window);
win.on("scroll", function() {
win.scrollTop() >= pos ? $("#topMenuX").addClass("fixed") : $("#topMenuX").removeClass("fixed");
});
});
</script>
<style>
body {
padding:0;
margin:0px;
}
#topMenuX {
background: #666;
padding: 20px;
height:45px;
color: #fff;
}
#topMenuX .insideMenu li {
float:left;
list-style:none;
}
</style>
</head>
<body>
<div id="topMenuX">
<ul class="insideMenu">
<li>CoreXDesigns</li>
<li>Simple Sticky Menu Example</li>
</ul>
</div>
</body>
</html>