I made a navigiation bar that changes photo on hover. It works when I hover on links (first level menu) but when I hover on the dropdown's (second level menu) the photo goes off. How do I make photo to stay when hover on both main menu and submenu (dropdown). The photo should not disappear when I hover on submenu.
I would like to achieve this without using JavaScript, purely with CSS.
nav{
background-color: #fff;
width:150px;
height: 667px;
float:right;
}
nav h1{
padding: 20px;
color: #777;
font: 20px tahoma,times,serif;
}
ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
width: 150px;
text-align: right;
}
ul li {
position: relative;
}
li ul {
position: absolute;
right: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border-bottom: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
li:hover ul {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
background: #333;
background: url("http://vignette1.wikia.nocookie.net/logopedia/images/6/69/FC-Barcelona-old-logo.png/revision/latest?cb=20120211172615");
background-repeat: no-repeat;
}
.container{
overflow: hidden;
margin-right: 0;
height: 500px;
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
width: 800px;
}
.container img{
margin-top: 0px auto;
position: fixed;
top: 0px;
left: 0px;
z-index: -60;
height: 500px;
width: 800px;
}
.container li img {
opacity: 0.5;
margin-top: 0px auto;
position: absolute;
left: 0px;
z-index: -50;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
li:nth-child(1){
padding-top: 0px;
}
li a:hover {
background: #eee;
}
li a:hover + img {
opacity: 1;
position: fixed;
margin-top: 0px auto;
left: 0px auto;
height: 500px;
width: 800px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<LINK rel=stylesheet type="text/css" href="StyleSheet.css"/>
<title></title>
</head>
<body>
<div class="container">
<nav><h1><b>ברצלונה</b></h1>
<ul>
<li>ברצלונה<img src="http://media3.fcbarcelona.com/media/asset_publics/resources/000/160/456/size_640x360/pic_2015-01-11_BARCELONA-ATLETICO_45.v1431011244.JPG" alt="1"></li>
<li>לה ליגה<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTd6ngNNGapdLhqdS4KbuoNNCaaUMP4Svu-e_9rXMh_wLDtPpSE" alt="1">
<ul>
<li>ברצלונה</li>
<li>ריאל</li>
<li>אתלטיקו</li>
</ul>
</li>
<li>בונדסליגה<img src="http://static3.demotix.com/sites/default/files/imagecache/a_scale_large/2000-5/photos/1368393557-club-atletico-de-madrid-v-fc-barcelona--la-liga_2046465.jpg" alt="1">
<ul>
<li>באיירן</li>
<li>וולפסבורג</li>
<li>הנדובר</li>
<li>דורטמונד</li>
</ul>
</li>
<li>סיירה א<img src="http://barcelonacamps.com/wp-content/uploads/2014/04/barca-new-team.jpg" alt="1">
<ul>
<li>אינטר</li>
<li>מילאן</li>
<li>יובה</li>
<li>רומא</li>
</ul>
</ul>
</li>
</nav>
</div>
</body>
</html>
See this fiddle
Just do the below slight change in your CSS..
Replace
li a:hover + img {
opacity: 1;
position: fixed;
margin-top: 0px auto;
left: 0px auto;
height: 500px;
width: 800px;
}
with
li:hover a +img {
opacity: 1;
position: fixed;
margin-top: 0px auto;
left: 0px auto;
height: 500px;
width: 800px;
}
Also, your <li> and <ul> tags are not properly closed at the end. Bring </li> before the </ul>.
Related
So i have made a website with HTML and CSS. It has different effects like the parallax effect(a very simple version of it), transparent navbar, and now I am trying to make my Navbar responsive. Everything works, but my hamburger menu is very far to the left and when I find a way to move it, it doesnt work after i moved it.
As you can see it is very close to the top of the screne and so far to the left that it is past the logo. I want it to stay to the right even if i made the screen smaller ofr bigger, like it moves with the screen when i move it.
This is my css code:
#font-face {
font-family: 'Poppins';
src: url(Fonts/Poppins-Regular.ttf
}
#font-face {
font-family: 'Comfortaa';
src: url(Fonts/Comfortaa-VariableFont_wght.ttf);
}
#font-face {
font-family: 'DancingScript';
src: url(Fonts/DancingScript-VariableFont_wght.ttf);
}
* {
padding: 0;
margin: 0;
color: #A6808C;
box-sizing: border-box;
}
body {
background-color: #565264;
font-family: Poppins;
}
html {
overflow: scroll;
overflow-y: hidden;
}
::-webkit-scrollbar {
width: 0%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.4);
border-bottom: 0px solid #fff;
z-index: 9999
}
nav .logo {
padding: -22px 20px;
height: 50px;
float: left;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
line-height: 60px;
color: #fff;
padding: 12px 30px;
text-decoration: none;
font-size: 25px;
}
nav ul li a:hover {
background: rgba(0,0,0,0.1);
border-radius: 5px;
}
.text {
font-size: 2rem;
padding: 2rem;
background-color: #565264;
color: whitesmoke;
}
.title {
font-size: 7rem;
color: whitesmoke;
text-shadow: 0 0 5px black;
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(3);
background-repeat: no-repeat;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
.hamburger {
position: relative;
width: 30px;
height: 4px;
background: #fff;
border-radius: 10px;
cursor: pointer;
z-index: 2;
transition: 0.3s;
}
.hamburger:before, .hamburger:after {
content: "";
position: absolute;
height: 4px;
right: 0;
background: #fff;
border-radius: 10px;
transition: 0.3s;
}
.hamburger:before {
top: -10px;
width: 20px;
}
.hamburger:after {
top: 10px;
width: 20px;
}
.toggle-menu {
position: absolute;
width: 30px;
height: 100%;
z-index: 3;
cursor: pointer;
opacity: 0;
}
.hamburger, .toggle-menu {
display: none;
}
.navigation input:checked ~ .hamburger {
background: transparent;
}
.navigation input:checked ~ .hamburger::before {
top: 0;
transform: rotate(-45deg);
width: 30px;
}
.navigation input:checked ~ .hamburger::after {
top: 0;
transform: rotate(45deg);
width: 30px;
}
.navigation input:checked ~ .menu {
right: 0;
box-shadow: -20px 0 40px rgba(0,0,0,0.3);
}
#media screen and (max-width: 1062px) {
.hamburger, .toggle-menu {
display: block;
}
.header {
padding: 10px 20px;
}
nav ul {
justify-content: start;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
right: -300px;
background-color: #565264;
width: 300px;
height: 100%;
padding-top: 65px;
}
.menu li {
width: 100%;
}
.menu li a, .menu li a:hover {
padding: 30px;
font-size: 24px;
box-shadow: 0 1px 0 rgba(112,102,119,0.5) inset;
}
}
<head>
<meta charset="utf-8">
<meta name="veiwport" content="width=device-width, initalscale=1.0">
<Title>Test</Title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<nav>
<div class="logo">
<a href="index.html">
<img src="Pictures\Logo DesignK whitegreen.png" alt="DesignK" height="50px" width="200px">
</a>
</div>
<div class="navigation">
<input type="checkbox" class="toggle-menu">
<div class="hamburger"></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Feedback</li>
</ul>
</div>
</nav>
<div class="wrapper">
<header>
<img src="Pictures/LakeandMoutains.jpg" class="background">
<h1 class="title">Welcome!</h1>
</header>
<section class="text">
<h3>Essay on Mountains</h3>
</section>
</div>
</body>
Does anyone know how to make the hamburger menu move to the right side of the screen?
Update your .hamburger, .toggle-menu styles like this
.hamburger, .toggle-menu {
display: block;
position: absolute;
right: 30px;
}
Update the value of right according to your need.
You could always use flexbox. The following lines of code will display this on the right hand side:-
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.navigation {
margin-left: auto;
}
Add this to your navigation class:
.navigation{
position:relative;
}
and then this to your hamburger menu to make it stick to the right.
.hamburger{
position:relative;
right:8%;
}
The position absolute will make the hamburger-menu stick relative to the navigation bar and right 8% will stick it to the right.
You must understand the importance of HTML structure and positioning because this is the problem in your HTML.
To fix your problem, you need to put the burger menu and the check box in one container and then position the container.
The problem now is that you are positioning every part individually and their width and height are not properly set.
try to follow the steps I mentioned then let us know if you can do it or not.
Good evening! Well, the problem here is that I'm trying to make a tooltip appear while hovering a li but if the position where it's supposed to appear is higher or lower than the nav height (where the li is), it dissapears, but if I move the tooltip inside the nav's height/width, it appears perfectly. I need the tooltip to appear even if its size is bigger or goes off the nav's size. Hope I've been clear! Here is my code:
<html>
<head>
<title> Práctica 2 </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header></header>
<nav>
<ul>
<li>
<div class="dropdown">Primero
<div class="dropdown-content">
1.1
1.2
1.3
</div>
</div>
</li>
<li>Segundo</li>
<li>Tercero</li>
<li>Cuarto <span class="tooltiptext">Tooltip text</span></li>
<ul>
</nav>
<main>
Línea de texto. </br>
Línea de texto. </br>
Línea de texto. </br>
</main>
</body>
</html>
And the CSS:
* { margin: 0%;
padding: 0%;}
header { margin: auto;
height: 300px;
width: 800px;
background-color: gray;}
nav { margin: auto;
width: 800px;
height: 50px;
position: sticky;
position: -webkit-sticky;
top: 0; }
nav ul { list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
background-color: #333;
width: 800px; }
nav ul li { float: left;
width: 25%;
b: 50px 0px 50px 0px;}
nav ul li:hover { background-color: red; }
nav ul li a { display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
.dropdown-content { display: none;
position: absolute;
background-color: #333;
min-width: 25%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 0px 0px 5px 5px;}
.dropdown-content a:hover { background-color: gray; }
.dropdown-content a:last-child { border-radius: 0px 0px 5px 5px; }
.dropdown:hover .dropdown-content { display: block; }
main { width: 800px;
margin: 10px auto; }
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
I think the problem is the nav, but I'm not sure, because, as I said, if the tooltip's position is inside the nav's size, it appears.
Thank you very much!
I am trying to make a website. I decided to make the navigation bar have a fixed position so when I scroll down I can always see it but, when I add to the nav element the property position:fixed it just disappears. Cant' figure out what's happening. Can someone explain, what I'm doing wrong? Thank you very much!
P.S: I am new to coding.
HTML and CSS
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
header nav #logo {
width: 140px;
position: absolute;
top: 15px;
}
nav {
position: relative;
background-color: #242628;
height: 70px;
padding-left: 20px;
}
nav ul {
position: absolute;
height: 100%;
margin: auto;
top: 0;
bottom: 0;
width: 600px;
padding-left: 200px;
}
nav ul li {
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
display: inline;
float: left;
height: inherit;
width: 100px;
border-right: 1px solid gray;
}
nav ul li:hover {
background-color: rgba(12, 240, 255, 0.3);
}
nav ul li a {
color: white;
text-decoration: none;
position: absolute;
height: inherit;
width: inherit;
text-align: center;
padding-top: 25px;
}
<header>
<nav>
<img id="logo" src="images/logo.png" alt="logo" />
<ul>
<li>Home</li>
<li>Rate it!</li>
<li>Courses</li>
<li>Videos</li>
</ul>
</nav>
</header>
Once you fix the position you have to specify where you want it.
top: 20px;
left: 0px;
Etc....
You have to add a width to fixed elements (100% in this case):
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
header nav #logo {
width: 140px;
position: absolute;
top: 15px;
}
nav {
position: fixed;
width: 100%;
background-color: #242628;
height: 70px;
padding-left: 20px;
}
nav ul {
position: absolute;
height: 100%;
margin: auto;
top: 0;
bottom: 0;
width: 600px;
padding-left: 200px;
}
nav ul li {
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
display: inline;
float: left;
height: inherit;
width: 100px;
border-right: 1px solid gray;
}
nav ul li:hover {
background-color: rgba(12, 240, 255, 0.3);
}
nav ul li a {
color: white;
text-decoration: none;
position: absolute;
height: inherit;
width: inherit;
text-align: center;
padding-top: 25px;
}
<header>
<nav>
<img id="logo" src="images/logo.png" alt="logo" />
<ul>
<li>Home</li>
<li>Rate it!</li>
<li>Courses</li>
<li>Videos</li>
</ul>
</nav>
</header>
I let you here a working version. I only replaced relative with fixed in your code to the nav
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 300%;
}
header nav #logo {
width: 140px;
position: absolute;
top: 15px;
}
nav {
position: fixed;
background-color: #242628;
height: 70px;
padding-left: 20px;
}
nav ul {
position: absolute;
height: 100%;
margin: auto;
top: 0;
bottom: 0;
width: 600px;
padding-left: 200px;
}
nav ul li {
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
display: inline;
float: left;
height: inherit;
width: 100px;
border-right: 1px solid gray;
}
nav ul li:hover {
background-color: rgba(12, 240, 255, 0.3);
}
nav ul li a {
color: white;
text-decoration: none;
position: absolute;
height: inherit;
width: inherit;
text-align: center;
padding-top: 25px;
}
<header>
<nav>
<img id="logo" src="images/logo.png" alt="logo" />
<ul>
<li>Home</li>
<li>Rate it!</li>
<li>Courses</li>
<li>Videos</li>
</ul>
</nav>
</header>
Note that I set height to 300% to have some scroll on the document
I honestly don't see anything wrong:
http://codepen.io/anon/pen/BWpLdd
.scrollTest {
height: 2000px;
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
}
* {
box-sizing: border-box;
padding: 0;
margin: 0; }
html, body {
width: 100%;
height: 100%; }
header nav #logo {
width: 140px;
position: absolute;
top: 15px; }
nav {
position: fixed;
background-color: #242628;
height: 70px;
padding-left: 20px;
width: 100%;
}
nav ul {
position: absolute;
height: 100%;
margin: auto;
top: 0;
bottom: 0;
width: 800px;
padding-left: 200px; }
nav ul li {
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
display: inline-block;
height: inherit;
width: 100px;
border-right: 1px solid gray; }
nav ul li:hover {
background-color: rgba(12, 240, 255, 0.3); }
nav ul li a {
color: white;
text-decoration: none;
position: absolute;
height: inherit;
width: inherit;
text-align: center;
padding-top: 25px; }
Make sure you're adding it to the nav parent element.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
header nav #logo {
width: 140px;
position: absolute;
top: 15px;
}
nav {
position: fixed;
background-color: #242628;
height: 70px;
padding-left: 20px;
width: 100%;
background-color: black;
}
nav ul {
position: relative;
height: 100%;
margin: auto;
top: 0;
bottom: 0;
}
nav ul li {
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
display: inline;
float: left;
height: inherit;
width: 200px;
border-right: 1px solid gray;
}
nav ul li:hover {
background-color: rgba(12, 240, 255, 0.3);
}
nav ul li a {
color: white;
text-decoration: none;
position: absolute;
height: inherit;
width: inherit;
text-align: center;
padding-top: 25px;
}
article{
height: 500px;
}
<header>
<nav>
<img id="logo" src="" alt="logo" />
<ul>
<li>Home</li>
<li>Rate it!</li>
<li>Courses</li>
<li>Videos</li>
</ul>
</nav>
</header>
<article></article>
Working code
If your nav is set to realtive and is changed to fixed your absolute elements will be relative to the body and those elements will leave the nav.
Change the position of the absolute elements and the css of the nav to:
nav {
background-color: #242628;
height: 70px;
padding-left: 20px; }
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
Code I made is not working properly it's working in DW but not in Chrome . In Chrome I have to resize the screen then it change but when I open it in responsive mode it shows zoomed out version.
Here's the code
<!DOCTYPE><html>
<head>
<meta content="width=device-width,initial-scale=1.0">
<title>Shivam | Home</title>
<style type="text/css">
body {
margin: 0;
font-family: cursive;
font-size: 20px;
width: 100%;
height: 5000px;
}
/*menu*/
.nav {
position: fixed;
width: 100%;
max-height: 180px;
z-index: 999;
margin: 0;
padding-left:0;
background: #eee;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.nav li {
float: right;
list-style-type: none;
position: relative;
font-size: 1em;
color: #111;
display: block;
line-height: 3em;
overflow: hidden;
}
.nav li a {
color: #111;
display: block;
padding: 0 26px;
text-decoration: none;
transition: 0.25s all ease;
overflow: hidden;
}
.actv{
background: #08f;
color: #fff;
box-shadow: 0 0 5px rgba(0, 136, 255, 0.5);
transition: 1s ease;
}
.navback{
background: #eee;
position: fixed;
width: 100%;
z-index: 998;
height: 60px;
border-bottom: #08f solid 2px;
}
.logo{
background: #08f;
cursor: default;
}
.sm{
width: 0;
height: 0;
border-left: 30px solid #08f;
border-bottom: 30px solid transparent;
border-top: 30px solid transparent;
padding: 0 0 0 15;
}
/*side bar*/
#btn{
color: #111;
cursor: pointer;
transition:1s;
padding-left:50px;
float:right;
font-size: 25px;
line-height: 60px;
}
.overlay {
height: 100%;
width: 0%;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
background: #08f;
overflow: hidden;
transition: 0.5s;
box-shadow: 2px 0 10px rgba(0,0,0,0.5);
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #eee;
display: block;
transition: 0.3s;
}
.overlay-content a:after {
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 1000px;
height: 1000px;
margin-left: -500px;
margin-top: -500px;
background: #eee;
border-radius: 100%;
opacity: 1;
transform: scale(0);
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.overlay-content a:not(:active):after {
animation: ripple 1s ease-out infinite;
}
.overlay-content a:after {
visibility: hidden;
}
.overlay-content a:focus:after {
visibility: visible;
}
.act{
background: #eee;
}
#media only screen and (max-width: 945px){
.nav{
background: #08f;
}
.nav #a{
display: none;
}
#logo{
margin-left: 10%;
}
#logo a{
padding-right: 0;
}
}
#media only screen and (min-width: 945px){
#btn{
display: none;
}
}
</style>
<script type="text/javascript">
function openNav() {
document.getElementById("myNav").style.width = "65%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</head>
<body>
<!Submenu>
<ul class="nav">
<li class="logo" style="padding:0;float: left;" title="Open Menu" id="btn" onclick="openNav()"><a><font color="#eee">☰</font></a></li>
<li style="float: left;" id="logo" class="logo"><a title="Shivam"><font color="#eee" size="40px">Shivam</font></a><li id="a" style="float: left;" class="sm"></li></li>
<li id="a"><a> </a></li><li id="a"><a> </a></li><li id="a"><a> </a></li>
<li id="a"><a title="Contact With Shivam" href="contact.html">Contact</a></li>
<li id="a"><a title="About Shivam" href="about.html">About Me</a></li>
<li id="a"><a title=" Shivam's Works" href="works.html">My Works</a></li>
<li id="a"><a title="Homepage"class="actv">Home</a></li>
</ul>
<div id="myNav" class="overlay">
<a title="Close Menu" href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a title="Home" class="act"><font color="#08f">Home</font></a><hr>
<a title="Works" href="works.html">Works</a><hr>
<a title="About" href="about.html">About</a><hr>
<a title="Contact" href="contact.html">Contact</a>
</div>
</div>
</body>
u forgot the name in the view port link past this in your header
<meta name="viewport" content="width=device-width,initial-scale=1.0">
The problem is that when I hover on li, hover do not work, with the first one it works but hover area is not the same as div's size.
This is a sidebar that works by checkbox without javascript.
here is HTML
<input type="checkbox" id="sidebartoggler">
<div id="page-wrap">
<label for="sidebartoggler" id="toggle">☰</label>
<div id="sidebar">
<ul class="elements">
<li>Str. Glowna</li>
<li>Wyb. przedmiotu</li>
</ul>
</div>
<div class="page-content">
and CSS
.page-content
{
position: relative;
z-index: 0;
transition: padding-left 0.5s;
}
#chose
{
font-size: 40px;
text-align: center;
margin: 5% 0 5% 0;
}
#sidebar
{
position: fixed;
left:-190px;
right: 0;
top: 0px;
bottom:0px;
width: 170px;
padding: 10px;
background: #333;
transition: left 0.5s;
display: inline-block;
}
#toggle
{
position: fixed;
left:20px;
top: 15px;
font-size: 30px;
transition: left 0.5s;
}
#sidebartoggler
{
display: none;
}
#sidebartoggler:checked + #page-wrap #sidebar
{
left:0px;
}
#sidebartoggler:checked + #page-wrap #toggle
{
left:200px;
}
#sidebartoggler:checked + #page-wrap .page-content
{
padding-left: 180px;
}
.page-content
{
padding-left: 0px;
}
#sidebar ul
{
font-size: 15px;
list-style: none;
list-style-position: inside;
width: 170px;
margin: 20px 0 0 -40px;
text-align: center;
}
#sidebar ul > li
{
padding: 10px 0;
margin: 5px 0 0 0;
background-color: #444;
display: block;
}
#sidebar ul > li:hover
{
background-color: #555
}
Here you can see the full code: https://jsfiddle.net/2hnLyjw4/1/
Sorry for my english.
Thanks for Your help!
The problem is you are using padding-left on .page-content; this is causing the contents to shift to the right as desired, but the div is partially sitting on top of your menu and interfering with the hover events.
Change it to use margin-left:
.page-content {
position: relative;
z-index: 0;
transition: margin-left 0.5s;
}
...
#sidebartoggler:checked + #page-wrap .page-content {
margin-left: 180px;
}
.page-content {
margin-left: 0px;
}