I found a problem with my navigation bar. Im using tag nav, ul, li for it. My intention is to make an image move according to the hover li. Not sure what is wrong with the css... I want to make the li:nth-child(3) to move position using 'top' when li:nth-child(1) is hovered.
Here is my html
<nav> <img class="nav_bar" src="images/navigation_stick.png">
<ul class="subsection">
<li class="subsection">Animation
<!--<h4 class="subsection">Modelling</h4>-->
<h4 class="subsection">Project</h4>
<!--<h4 class="subsection">Reel</h4>-->
</li>
<li class="subsection">Graphic
<h4 class="subsection">Poster</h4>
<!--<h4 class="subsection">Illustration</h4>-->
</li>
<li>
<img src="images/navigation_button.png">
</li>
</ul>
</nav>
here is my css
li h4.subsection{
font-size: 14px;
font-weight: lighter;
padding-top: 0;
display: block;
max-height: 0;
opacity: 0;
transition: visibility 0s, padding 0.3s, max-height 0.3s, opacity 0.2s ease-in;
transition: padding 0.3s, max-height 0.4s, opacity 0.2s ease-out;
}
li:hover > h4{
padding-top: 5px;
max-height: 50px;
opacity: 1;
}
li:nth-child(3){
display: block;
position: fixed;
left: 92.92%;
top: 100px;
transition: all 1000ms ease;
}
li:nth-child(1):hover + li:nth-child(3){
top: 300px;
}
thanks for your kind help!
You need to use ~ instead of + in the selector. ~ is a "general sibling", where as + is the adjacent/next sibling selector. :nth-child(1) and :nth-child(3) are general siblings, not adjacent.
li h4.subsection {
font-size: 14px;
font-weight: lighter;
padding-top: 0;
display: block;
max-height: 0;
opacity: 0;
transition: visibility 0s, padding 0.3s, max-height 0.3s, opacity 0.2s ease-in;
transition: padding 0.3s, max-height 0.4s, opacity 0.2s ease-out;
}
li:hover > h4 {
padding-top: 5px;
max-height: 50px;
opacity: 1;
}
li:nth-child(3) {
display: block;
position: fixed;
left: 92.92%;
top: 100px;
transition: all 1000ms ease;
}
li:nth-child(1):hover ~ li:nth-child(3) {
top: 300px;
}
<nav> <img class="nav_bar" src="images/navigation_stick.png">
<ul class="subsection">
<li class="subsection">Animation
<!--<h4 class="subsection">Modelling</h4>-->
<h4 class="subsection">Project</h4>
<!--<h4 class="subsection">Reel</h4>-->
</li>
<li class="subsection">Graphic
<h4 class="subsection">Poster</h4>
<!--<h4 class="subsection">Illustration</h4>-->
</li>
<li>
<img src="images/navigation_button.png">
</li>
</ul>
</nav>
Related
I am trying to create a simple, pure CSS push menu. The menu opens and closes when clicking on the Settings icon. This works already. However, I wish to move the icon inside the grey div and have it activate the menu when clicked. At the moment, the settings click only works when the icon is in the position it currently sits. If I move it inside the div, nothing happens.
Also, I would like to close the menu by clicking on the Settings text or left chevron icon inside the menu. I tried creating a second menu checkbox and associated styles, like so;
#menu-toggle-2:checked + .menu-icon {
right: 30%;
}
But doing this only moved the Settings div INSIDE the menu; it did not close the menu itself.
Here is the html code for the page and menu;
<head>
<style>
.content-container {
z-index: 0;
padding: 20px;
overflow: auto;
transition: all 300ms ease-in-out;
}
.slideout-sidebar {
position: fixed;
right: -28%;
z-index: 2;
width: 28%;
height: 100%;
padding: 20px;
transition: all 300ms ease-in-out;
}
.slideout-sidebar ul {
list-style: none;
}
.slideout-sidebar ul li {
cursor: pointer;
padding: 18px 0;
border-bottom: 1px solid #D1D4D7;
}
#menu-toggle {
display: none;
}
.menu-icon {
position: absolute;
top: 20px;
right: 20px;
z-index: 2;
transition: all 300ms ease-in-out;
cursor: pointer;
}
#menu-toggle:checked ~ .slideout-sidebar {
right: 0px;
}
#menu-toggle:checked + .menu-icon {
right: 30%;
}
#menu-toggle:checked ~ .content-container {
padding-right: 28%;
}
</style>
</head>
Body;
<body>
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="menu-icon">
<img class="icon" src="images2/ic-of-settings-gy.svg" style="width:33px;height:33px;" />
</label>
<div id="divMenu" class="slideout-sidebar">
<ul>
<li>
<img class="icon" src="images2/ic-of-chevron-left-gy.svg" />
<span style="padding-left:10px">Settings</span>
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="content-container">
<div class="container">
<div style="width:780px;height:800px;background-color:grey;">
</div>
</div>
</div>
</body>
And here is the image of the Settings menu item, which I would like to close the menu when clicked;
Thanks in advance
Managed to figure it out, if anyone needs the info. The trick is to stick a hidden input on the page, and a second one in your desired location, with the same ID. Code below.
<style>
#menu-toggle {
display: none;
}
.menu-icon {
position: absolute;
top: 1.25rem;
right: 1.25rem;
z-index: 2;
cursor: pointer;
}
content {
-ms-overflow-style: none;
-moz-transition: all 200ms ease-in;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
overflow-y: auto;
}
nav {
position: fixed;
right: 0;
width: 28%;
height: 100%;
margin: 0 -28% 0 0;
-moz-transition: all 200ms ease-in;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
nav ul {
height: 100%;
list-style: none;
padding: 0;
}
nav li {
padding: 1.125rem 0 1.125rem 0;
border-bottom: 0.0625rem solid rgba(209, 212, 215, 1);
}
label {
display: block;
cursor: pointer;
-moz-transition: all 200ms ease-in;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
z-index: 500;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ nav {
margin: 0;
}
input[type="checkbox"]:checked ~ content {
-webkit-transform: translate3d(-28%, 0, 0);
-moz-transform: translate3d(-28%, 0, 0);
-o-transform: translate3d(-28%, 0, 0);
transform: translate3d(-28%, 0, 0);
}
</style>
<input type="checkbox" id="menu-toggle" />
<nav>
<ul>
<li class="font-weight-bold settings-list-item">
<label for="menu-toggle" class="list-spacer">
<img src="images/chevron-left.png" />
<span><b class="ng-tns-c1354-3 font-15 padding-left-20">Settings</b></span>
</label>
</li>
<li class="font-weight-bold settings-list-item">
Home
</li>
<li class="list-spacer">
About
</li>
<li class="list-spacer">
Contact
</li>
</ul>
</nav>
<content>
<div style="width:780px;height:800px;background-color:grey;">
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="nav-icon margin-top-35">
<img class="settings-icon" src="images/settings.png" />
</label>
</div>
</content>
I am trying to create a navigation bar that slides out from the left side of the screen, without the use of JavaScript. All of the navigation elements are there, but hidden for the initial page opening, clicking on the "V" in the top right corner should open up the navigation but doesn't. Also, There is no other styling included on my page, I just want to make this work before moving forward.
I have tried a few different methods for creating this effect but to no avail. This most recent method was pulled directly from a tutorial on creating exactly what I was hoping to achieve, and still nothing.
nav {
width: 100%;
text-align: center;
}
nav a {
display: block;
padding: 15px 0;
}
nav li:first-child {
padding-top: 100px;
}
a {
text-decoration: none;
color: black;
}
li {
list-style-type: none;
}
.menu {
width: 240px;
height: 100vh;
position: absolute;
background-color: red;
left: -240px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
font-family: "lobster two";
font-size: 48px;
cursor: pointer;
float: right;
margin-top: 20px;
margin-right: 25px;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked - .menu {
position: absolute;
left: 0;
}
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-icon">V</label>
<header>
<div id="brand"><img class="top-logo" src="https://res.cloudinary.com/spacecatind/image/upload/v1560968515/Vinyl/placeholder_bjekss.png"></div>
</header>
<div id="nav-div">
<nav class="menu">
<ul>
<li class="nav-item">Home</li>
<li class="nav-item">Menu</li>
<li class="nav-item">Cocktails</li>
<li class="nav-item">Events</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
</div>
Your selector is wrong, - isn't a valid selector
Change
#menu-toggle:checked - .menu
To
#menu-toggle:checked ~ #nav-div>.menu
nav {
width: 100%;
text-align: center;
}
nav a {
display: block;
padding: 15px 0;
}
nav li:first-child {
padding-top: 100px;
}
a {
text-decoration: none;
color: black;
}
li {
list-style-type: none;
}
.menu {
width: 240px;
height: 100vh;
position: absolute;
background-color: red;
left: -240px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
font-family: "lobster two";
font-size: 48px;
cursor: pointer;
float: right;
margin-top: 20px;
margin-right: 25px;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked~#nav-div>.menu {
position: absolute;
left: 0;
}
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-icon">V</label>
<header>
<div id="brand"><img class="top-logo" src="https://res.cloudinary.com/spacecatind/image/upload/v1560968515/Vinyl/placeholder_bjekss.png"></div>
</header>
<div id="nav-div">
<nav class="menu">
<ul>
<li class="nav-item">Home</li>
<li class="nav-item">Menu</li>
<li class="nav-item">Cocktails</li>
<li class="nav-item">Events</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
</div>
I guess that you forgot to add animation.
#keyframes slidefFromRight{
0%{
transform:translateX(100px);
opacity:0;
}
50%{
transform:translateX(-30px);
}
100%{
transform:translateX(0);
opacity: 1;
}
}
Put the animation name under selector
#nav-div{
animation:slidefromRight;
animation-duration: 4s;
animation-delay: 0.5s;
opacity:0;
animation-fill-mode:forwards;
}
I am creating a vertical dropdown menu with several sub menus that only shown whenever i click the corresponding
icon (which is angle down arrow) in the menu. after the sub-menu is shown the angle down arrow should be reverted to be angle up arrow that whenever clicked the sub-menu disappears again.
what i could do till now is that when i click the angle-down arrow for the first time the sub-menu slides but no reverted arrow or any functionality any more so i can not
hide the sub-menu again.
HTML: one sample menu item
<li class="menu">
<a href="#" tabindex=0>First</a>
<label for="close-1" ><i class="fa fa-angle-up"></i></label>
<input type="radio" id="close-1" name="toggle1" >
<label for="open-1"><i class="fa fa-angle-down" ></i></label>
<input type="radio" name="toggle1" id="open-1">
<ul class="sub-menu">
<li>Test</li>
<li>Test</li>
</ul>
</li>
CSS:
input[type="radio"] {
display: none;
}
.menu {
position: relative;
padding: 1em ;
font-weight: 700;
width: 100%;
border: 1px solid #eee;
border-right: none;
}
.sub-menu {
max-height: 0;
transition: max-height 0.4s ease-in-out;
overflow: hidden;
padding: 0.5em;
}
.menu label {
position: absolute;
right: 10px;
top: 20px;
transition: 0.4s ease-in-out;
}
input[type="radio"]:checked + .sub-menu{
max-height: 320px;
transition: max-height 0.4s ease-in-out;
}
I tried some thing like that but did not work
input[type="radio"]:checked label:nth-of-type(2) {
opacity: 0;
visibility: hidden;
}
input[type="radio"]:checked label:nth-of-type(1) {
opacity: 1;
visibility: visible;
}
My idea is to toggle the two arrows showing and i think my problem would be solved, but i have no idea to achieve that without js.
Added some animation and made it absolute by following your code: Fiddle
No animation: Fiddle
.menu {
position: relative;
padding: 1em;
font-weight: 700;
width: 100%;
border: 1px solid #eee;
border-right: none;
}
.sub-menu {
max-height: 0;
transition: max-height 0.4s ease-in-out;
-webkit-transition: max-height 0.4s ease-in-out;
-moz-transition: max-height 0.4s ease-in-out;
-ms-transition: max-height 0.4s ease-in-out;
overflow: hidden;
padding: 0, 0.5em, 0.5em;
}
.close {
opacity: 0;
}
.open {
opacity: 1;
z-index: 5;
}
#open-1:checked~.close {
opacity: 1;
}
input[type="radio"] {
display: none;
}
input[type="radio"]~label {
position: absolute;
right: 10px;
top: 20px;
transition: 0.4s ease-in-out;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-ms-transition: 0.4s ease-in-out;
cursor: pointer;
}
#open-1:checked~.open {
opacity: 0;
z-index: 0;
}
#close-1:checked~.sub-menu {
max-height: 0px;
transition: max-height 0.4s ease-in-out;
-webkit-transition: max-height 0.4s ease-in-out;
-moz-transition: max-height 0.4s ease-in-out;
-ms-transition: max-height 0.4s ease-in-out;
}
#open-1:checked~.sub-menu {
max-height: 320px;
transition: max-height 0.4s ease-in-out;
-webkit-transition: max-height 0.4s ease-in-out;
-moz-transition: max-height 0.4s ease-in-out;
-ms-transition: max-height 0.4s ease-in-out;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<li class="menu">
<a href="#" tabindex=0>First</a>
<input type="radio" id="open-1" name="toggle1">
<label class="open" for="open-1">
<i class="fa fa-angle-down"></i>
</label>
<input type="radio" id="close-1" name="toggle1">
<label class="close" for="close-1">
<i class="fa fa-angle-up"></i>
</label>
<ul class="sub-menu">
<li>Test</li>
<li>Test</li>
</ul>
</li>
My page no longer applies the :hover effect to my .tabs li element, but I can't for the life of me figure out why. I commented out my jQuery script and it still won't work.
Here's a JSFiddle: https://jsfiddle.net/qpmg4wzq/
<div id="tabs-container">
<ul class="tabs">
<li class="tab current" data-tab="tab-1">tab 1</li>
<li class="tab" data-tab="tab-2">tab 2</li>
<li class="tab" data-tab="tab-3">tab 3</li>
<li class="tab" data-tab="tab-4">tab 4</li>
</ul>
</div>
#tabs-container {
float: left;
width: 100%;
overflow: hidden;
}
.tabs {
padding: 0px;
list-style: none;
clear: left;
float: left;
left: 50%;
}
.tabs li {
display: block;
float: left;
right: 50%;
margin: 0;
padding: 10px 20px 5px 20px;
cursor: pointer;
font-size: 1.1em;
line-height: 2em;
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
-ms-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
-webkit-transition: background .2s linear;
-moz-transition: background .2s linear;
-ms-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
}
.tabs li:hover {
background: #88abc2!important;
}
.tabs li.current {
background: #d0e0eb;
color: #49708a;
}
.tab-content {
display: none;
padding: 15px;
line-height: 1.4;
}
.tab-content.current {
display: inherit;
}
Thanks.
Your .tab-content is overlapping the .tabs-container so any :hover action you make is actually registering as a hover on the .tab-content element.
A couple of options to solve this
Move the tab-content down using margin-top
.tab-content.current {
display: inherit;
margin-top: 60px;
}
Remove float: left from #tabs-container
I have some social media icons at the bottom of my page. They are png images, and I would like to replace those images with a different one when they are hovered. I want to use the first solution given here and put the two images on top of one another.
However, I'm having trouble putting the images on top of each other. I'm not sure what the right positioning is to use in order to make this work. Can someone give me a hint? (Not insterested in using JavaScript for this, I don't know how that works yet.
HTML
<div class="footer" align="center">
<ul>
<li>Follow Us:</li>
<a><img src="Images/Social Icons/Facebook-Hover.png"><img src="Images/Social Icons/Facebook.png"></a>
<a><img src="Images/Social Icons/Twitter-Hover.png"><img src="Images/Social Icons/Twitter.png"></a>
<a><img src="Images/Social Icons/Instagram-Hover.png"><img src="Images/Social Icons/Instagram.png"></a>
<a><img src="Images/Social Icons/Pinterest-Hover.png"><img src="Images/Social Icons/Pinterest.png"></a>|
<li><a>About Us</a></li> |
<li><a>Ask Us</a></li> |
<li><a>Contact Us</a></li>
</ul>
</div>
CSS:
.footer {
background-color: #061336;
padding: 15px;
padding-bottom: 25px;
position: fixed;
width: 100%;
bottom: 0px;
}
.footer li {
font-family: Roboto, Arial;
margin-left: 10px;
margin-right: 20px;
display: inline-block;
text-decoration: none;
color: #ffffff;
transition: ease-in-out all 200ms;
-moz-transition: ease-in-out all 200ms;
-webkit-transition: ease-in-out all 200ms;
-o-transition: ease-in-out all 200ms;
}
.footer li:hover {
opacity: .7;
transition: ease-in-out all 200ms;
-moz-transition: ease-in-out all 200ms;
-webkit-transition: ease-in-out all 200ms;
-o-transition: ease-in-out all 200ms;
}
.footer img {
height: 25px;
margin-left: 3px;
margin-right: 3px;
right: 13px;
top: 6px;
position: relative;
}
There's a pretty simple solution using the :first-child CSS selector.
.footer ul a {
display: block;
position: relative;
width: [your icon width]px;
height: [your icon height]px;
}
.footer ul a img {
position: absolute;
top: 0;
left: 0;
}
.footer ul a img:first-child {
opacity: 0;
z-index: 10;
position: absolute;
top: 0;
left: 0;
}
.footer ul a:hover img:first-child {
opacity: 0.7;
}
Create sprite sheet images - Here you can find tutorial how to create http://css-tricks.com/css-sprites/
This is what I would do instead, because, this way I don't have to struggle with "margin-top: -100px", or worse, javascript.
.myicon{
width:50px;
height:50px;
background:red;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
transition: background .25s ease-in-out;
}
.myicon:hover{
background:blue;
}
<div class='myicon'></div>