I was trying to do some fading effects with Javascript but it was giving me some issues. I've managed to get my drop down menu working entirely with CSS, but I can't figure out for the life of me how to get the menu to fade in / out when hovering over it's parent for some reason.
jsfiddle
HTML
<body>
<div id="header1">
<table width="100%" height="60px" border="0">
<tr>
<td align="center"><ul id="horiznav">
<li><a href="#" class='class2'>Home</a></li>
<li><a href="#" class='class2'>Statistics</a></li>
<li><a href="#" target="_blank" class='class2'>Overview</a></li>
<li><a href="#" class='class2'>Lists</a>
<ul>
<li><a href="#" class='class2'>All Active Projects</a></li>
<li><a href="#" class='class2'>By Phase</a></li>
<li><a href="#" class='class2'>By User</a></li>
<li><a href="#" class='class2'>Completed Projects</a></li>
</ul>
</li>
<li><a href="#" class='class2'>New Project</a></li>
<li><a href="#" class='class2'>Administration</a></li>
</ul></td></tr>
</table>
</div>
</body>
CSS
#header1{
background: #0d2965;
background-color: #0d2965;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#FFF;
}
ul#horiznav, #horiznav ul{/*remove the bullets from the dropdown ul as well*/
margin:0;
padding:0;
list-style-type:none;
height:32px;
text-align:center
}
#horiznav li{
display: inline-block;
/*float: left;*//*float the li element so the menu's horizontal...*/
width:150px;/*...and set the width*/
z-index: 1;
position:relative;/*set position:relative as the start point for absolutely positioning the dropdown*/
}
#horiznav li a{
display:block;/*make the link a block element...*/
width:150px;/*...with a fixed width...*/
line-height:30px;/*...and set the line-height to vertically centre the text*/
text-align:center;/*horizontally centre the text...*/
color:white;/*...colour it white...*/
text-decoration:none;/*...and remove the default underline*/
background-color:#EA9531;/*give the link an orange background...*/
border:1px solid white/*...and a white border...*/
}
#horiznav li a:hover{
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
color:#333333/*change the text colour on :hover*/
}
#horiznav li ul{
display:none;/*hide the dropdown*/
position:absolute;/*position it absolutely..*/
left:0;/*...align the left edge with the left edge of the parent li...*/
top:32px/*...and 32px down from the top - 30px height + 2px for the border*/
}
#horiznav li:hover ul {
display:block/*display the ul when the parent li is hovered*/
}
#horiznav li ul a{
background-color:#FFB33B/*give the dropdown a different background colour*/
}
Does anyone have any ideas or links to point me in the right direction?
Thanks in advance!
Transition cant be used on the display property.
Use visibility and opacity instead.
Use this CSS
#horiznav li ul {
-webkit-transition:visibility 0.5s ease, opacity 0.5s ease;
-moz-transition:visibility 0.5s ease, opacity 0.5s ease;
-o-transition:visibility 0.5s ease, opacity 0.5s ease;
transition:visibility 0.5s ease, opacity 0.5s ease;
visibility:hidden;
opacity:0;
position:absolute;
left:0;
top:32px;
}
#horiznav li:hover ul {
visibility:visible;
opacity:1;
}
Proof in JSFiddle
Works fine for me.
Related
I'm trying to do a sidebar for my html page. But i could not adjust the width of the sidebar. Also the menu icon when click should be closing/open the sidebar but it does not work.
Im a new learner , please help.
My code at here!
#sidebar {
background:#151719;
height:1000px;
width:20%; <!--- Cannot adjust width --->
position:absolute;
left:-248px; <!--- this will let the sidebar disapper --->
transition:all .3 ease-in-out;
-webkit-transition:all .3 ease-in-out;
-moz-transition:all .3 ease-in-out;
-ms-transition:all .3 ease-in-out;
-o-transition:all .3 ease-in-out;
}
You are close, but comment separators should be /*..*/, not <!---..--->. CSS is not HTML. Those comments prevent the CSS from being parsed correctly.
Then there is a #sidebar {width: 100%; halfway down, which overrides the width:248%; on the top.
And finally, the selector for moving the sidebar on selecting the checkbox should be #menuToggle:checked ~ #sidebar. Yours did nothing.
If you correct those errors, the page works flawlessly.
*{padding:0px;
margin:0px;
font-family:sans-serif;}
#sidebar{
background:#151719;
height:1000px;
width:248px; /* Cannot adjust width */
position:absolute;
left:-248px; /* this will let the sidebar disapper */
transition:all .3 ease-in-out;
-webkit-transition:all .3 ease-in-out;
-moz-transition:all .3 ease-in-out;
-ms-transition:all .3 ease-in-out;
-o-transition:all .3 ease-in-out;
}
#sidebar .menu li{
list-style-type:none;}
#sidebar .menu a{
text-decoration:none;
color:rgba(230,230,230,0.9);
display:block;
padding:15px 0;
border-bottom:1px solid rgba(100,100,100,0.45);}
#header{
width:100%;
height:5%;
margin:auto;
border-bottom:1px solid #EEE;}
#header .brand{
float:left;
line-height:50px;
color:#151719;
font-size:30px;
font-weight:bold;
padding-left:20px;}
#sidebar{
/* width:100%; */ /* removed because this would override the 248px above */
text-align:center;}
#sidebar .menu li:last-child a{border-bottom:none;}
#sidebar a:hover{
background:grey;
color:black;}
.menu-icon{
margin:2.5px 5px 0px 0px;
padding:10px 15px;
border-radius:5px;
background:#151719;
color:rgba(230,230,230,0.9);
cursor:pointer;
float:right;}
#menuToggle:checked ~ #sidebar {
position:absolute;
left:0;} /* Not sure is it correct or not, by clicking the checkbox, the sidebar should be displayed nicely, back to original */
<input type="checkbox" id="menuToggle" style="display:none;">
<label for="menuToggle" class="menu-icon">☰</label>
<div id="header">
<div class="brand">Cinema</div>
</div>
<div id="sidebar">
<ul class="menu">
<li>Dashboard</li>
<li>Help Center</li>
<li>Summary</li>
<li>Customer Interface</li>
</ul>
</div>
you can set width like this :
width: 20vw;
left: 0; // left: -20vw;
Your styles are applied to the #menuToggle item. Therefore the sidebar never hears about this change.
#menuToggle:checked {
position:absolute;
left:0;
}
Also because both elements do not have HTML relations, a CSS workaround might be risky. It's important to mention the selector #menuItem ~ #sidebar which will select #sidebars that precede #menuItem.
#menuToggle:checked ~ #sidebar {
position:absolute;
left:0;
}
Although it is definitely more prone to break in the future when the website has more content.
I suggest you have an event listener on the checkbox to toggle a class on the sidebar element. This can be done like so:
document.getElementById('menuItem').addEventListener('change', function(e) {
let sidebar = document.getElementById('sidebar');
this.checked ?
sidebar.classList.add('active') :
sidebat.classList.remove('active');
});
I am new to HTML and CSS. At the moment, I am trying to learn them. What I want to do is hiding a div and showing him only if you hover on another div. I almost did it, but I do not know how exactly to block the div and let only the hovered part of the div visible. (Tried with display:block; and visibility:hidden; but nothing seems to work). If someone could help me I would be really thankful. Thanks in advance.
PS: The idea is when you hover on "Menu" to hover automatically a div called "OnThisPage".
body{
margin:0;
padding:0;
background-color:#232323;
}
#NavigationWrap{
position:relative;
width:100vw;
height:5vw;
background-color:#FFFFFF;
}
#Logo{
position:relative;
margin-left:1vw;
top:50%;
width:29vw;
height:4vw;
transform:translateY(-50%);
float:left;
}
#NavigationMenu{
position:relative;
top:50%;
width:70vw;
height:2vw;
float:right;
transform:translateY(-50%);
}
#NavigationMenu li{
position:relative;
top:50%;
list-style-type: none;
float:right;
transform:translateY(-50%);
}
#NavigationMenu li:after{
position:relative;
margin-right:1vw;
font-family: 'OpenSans_Bold';
font-size:2vw;
content:"|";
}
#NavigationMenu li:first-child:after{
content:" ";
}
#NavigationMenu li a{
position:relative;
margin-right:1vw;
font-family: 'OpenSans_Bold';
font-size:2vw;
color: #cc6666;
text-decoration: none;
}
#NavigationMenu li a.active{
color:#00cccc;
}
#NavigationMenu li a.active:hover + #OnThisPage:hover{
color:#000000;
}
#NavigationMenu li a:hover{
position:relative;
color:#00cccc;
-webkit-transition: all 750ms ease;
-moz-transition: all 750ms ease;
-ms-transition: all 750ms ease;
-o-transition: all 750ms ease;
transition: all 750ms ease;
}
#OnThisPage{
position:relative;
}
#OnThisPage:hover{
position:absolute;
font-size:20vw;
top:10vw;
left:10vw;
width:10vw;
height:10vw;
background:red;
}
<div id="NavigationWrap">
<div id="Logo">Logo</div>
<div id="NavigationMenu">
<li>Login</li>
<li>Contact</li>
<li>Featured Projects</li>
<li>About Me</li>
<li><a class="active" href="#home">Home</a></li>
</div>
<div id="OnThisPage">Test</div>
Here you go with jQuery, I added comments for you so you understand what you do.
jQuery("document").ready(function() { // we wait for document to get ready state
jQuery("#NavigationMenu li a").hover(function() { // we get hover state event on Menu
jQuery("#OnThisPage").toggleClass("hover") // and we just toggle class "hover" for another div
})
})
Don't forget to load jQuery like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
And very small change to your CSS code - it's not :hover, but .hover now
#OnThisPage.hover{
position:absolute;
font-size:20vw;
top:10vw;
left:10vw;
width:10vw;
height:10vw;
background:red;
}
The idea is that we toggle class for the element when the other element is hovered and apply styles not for :hover, but for this new class.
My current situation:
http://jsfiddle.net/VOXRAZR/2a6r4/2/
My current problem:
Height of the div doesn't have transition effect and the outer div's height increases on hover (i dont want that!)
HTML
<div id="black_bar"></div>
<div id="top_nav">
<div class="menu" id="home">HOME</div>
<div class="menu">LIST OF CAR MANUFACTURERS</div>
<div class="menu">WHY USE CARZPEDIA?</div>
<div class="menu">ABOUT US</div>
<div class="menu">CONTACT US</div>
</div>
CSS
body{
margin:0;
}
#top_nav{
background-color:#000;
height:auto;
}
#top_nav a{
text-decoration:none;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
}
.menu{
display:inline-block;
padding:1em;
font-size:1em;
}
.menu:hover{
background-color:#09F;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
height:3em;
-webkit-transition:all 500ms ease;
-moz-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease;
}
#home{
color:#09F;
}
#home:hover{
color:#FFF;
}
Simply set a fixed height for the top bar (this is #top_nav in your CSS), and (optionally) set overflow:hidden; on it too (or the content will pop out when you hover over it. don't know if this is intentional)
See this fiddle with overflow hidden
Or this one with overflow visible
HTML:
<ul class="nav">
<ul>
<li>Home</li>
<li>A
<ul>
<li>X</li>
<li>Y</li>
<li>Z
</ul>
</li>
</ul>
</ul>
CSS:
.nav ul ul {
position:absolute;
visibility: hidden;
opacity:0;
width:170px;
margin:0;
transition:visibility 0s linear 0.3s, opacity 0.3s linear;
-webkit-transition:visibility 0s linear 0.3s, opacity 0.3s linear;
-moz-transition:visibility 0s linear 0.3s, opacity 0.3s linear;
}
.nav ul li:hover > ul {
visibility: visible;
opacity:1;
}
I want the first level to fade in, on hover on a list item of the main menu, but it just doesn't seem to work. I have spent hours on it and I'm not sure what's really wrong. Any pointers?
If you need to see the complete code: http://paperbird.in/projects/BusinessConclave/index.php
Edit: Ok, you contributed your website, so here's the solution, actually the transition does work, but z-index is causing you an issue there, so it flicks the sub menu instantly.. though it transits, use z-index: 100; for .nav ul li:hover > ul on line 153 in style.css and make sure you remove visibility properties as they are not required.
First of all, your markup is invalid, you cannot nest ul as a direct descendant to ul so nest that in an li and secondly, you cannot transit visibility property, so only use opacity and get rid of the visibility property as well. If you want, you can also use animation-timing-function property with a value of linear for a consistent fadein and fadeout effect.
Demo
.nav ul ul{
position:absolute;
opacity:0;
width:170px;
margin:0;
-webkit-transition:opacity 0.3s linear;
-moz-transition:opacity 0.3s linear;
transition:opacity 0.3s linear;
}
.nav ul li:hover > ul{
opacity:1;
}
And make sure you declare properietary properties before general properties.
I'm trying to understand the simplest background transition possible using only HTML5 and CSS3. Searching through stackoverflow I've learned it can be easily implemented using external libraries such as jQuery but for this project I've decided not relying on any of those.
Markup
<nav>
<ul>
<li><a id="foobar" href="http://www.google.com/search?q=foobar">Foobar</a></li>
</ul>
</nav>
Styles
body {
background: url('background-default.png'), no-repeat;
}
#foobar a:hover {
background: url('background-hover.png'), no-repeat;
-webkit-transition: // TODO;
-moz-transition: // TODO;
-o-transition: // TODO;
-ms-transition: // TODO;
transition: // TODO;
}
As I mentioned in my comment, you can't transition the background-image property but you can get the sort of effect you're looking for if you're willing to add extra markup and then transition the opacity. So you'll have some markup like this:
<nav>
<ul>
<li>
<img src="no-icon.png">
<img src="yes-icon.png">
<a id="foobar" href="http://www.google.com/search?q=foobar">Foobar</a>
</li>
</ul>
</nav>
Then set the transition on the images, absolute position them (so they'll be like backgrounds), and hide one of them by default (I've left out the vendor extensions for clarity):
nav li img {
position: absolute;
transition-duration: 1.5s;
opacity: 1;
}
nav li img:first-child {
opacity: 0;
}
Then swap the opacity values on li:hover:
nav li:hover img {
opacity: 0;
}
nav li:hover img:first-child {
opacity: 1;
}
Here's a full working example. Not an ideal solution because you have to add extra markup, but it'll work.
Here's an example of the code I use to achieve this. The images are sprites which each contain normal and hover state. The trick is to add the img to both li and a, and to use opacity to change the appearance of the image. You can then use css3 transitions to make this appear smoother.
<ul id="homenav">
<li class="h"><a href="#><span>Home</span></a></li>
<li class="i"><span>Inloggen</span></li>
<li class="v"><span>Voorbeelden</span></li>
</ul>
#homenav li.h, #homenav li.h a {background-image: url('img/btn_home.gif');}
#homenav li.i, #homenav li.i a {background-image: url('img/btn_inloggen.gif');}
#homenav li.v, #homenav li.v a {background-image: url('img/btn_voorbeelden.jpg');}
#homenav li {background-position: 0 170px;}
#homenav li a {background-position: 0 0;}
#homenav li a:hover
{opacity: 0;
-webkit-transition: opacity .8s ease-in;
-moz-transition: opacity .8s ease-in;
-o-transition: opacity .8s ease-in;
transition: opacity .8s ease-in;}
#homenav a {display: block; height: 100%;}
#homenav a span {display: none;}