I would like to create a navigation that reveals on hover however I am not sure how to go about doing it. I would like to do it how they have done it in the top left hand corner when you hover on the name: http://higz.ghosted.net/
I would like it to be just like the example and the menu which display to be a list so <ul> <li>
Here is an example related to what you are looking at- still there some issue you have to fix, but i have giving you the quick start.
final result -
http://jsbin.com/parok/4/edit?html,css,js,output
HTML -
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id='navigation'>
<div class='logo'></div>
<div class='menus'>
<ul>
<li><a href='#'>Home page</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Service</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS -
body {margin:0; padding: 0;}
#navigation {
width: 500px;
height: 100px;
background: wheat;
border-radius: 5px;
}
.logo {
width: 100px;
height: 100px;
background: red;
border-radius: 50px;
float:left;
margin-right: 20px;
font-size: 20px;
text-align:center;
color: white;
display: block;
}
.logo p {
margin-top: 30px;
}
.menus {
position: relative;
opacity: 0;
top: 40px;
}
.logo:hover {
cursor: pointer;
}
.menus a:link, .menus a:visited {color: darkgray; text-decoration: none; text-transform: uppercase;}
.menus ul {
list-style:none;
}
.menus ul li {
display: inline-block;
padding-right: 15px;
}
jQuery -
$(function(){
$('.logo').mouseover(function(){
//console.log('foo');
$('.menus').animate({
'opacity': 1,
'left': '20px'
}, 500);
}).mouseout(function(){
//console.log('bar');
$('.menus').animate({
'opacity': 0,
'left': '0px'
}, 500);
});
});
Use jquery and ajax if you want to do it Asynchronously. I prefer do it by calculating the navigation at run time using ajax provided they are not static pages. (depends on server side language you are using)
Otherwise just use jquery to do this.
With the hover event of jQuery you show the navigation and on just hide it :
$("#id").hover(function(){
$("#id").show();
});
$("#id").mouseleave/blur(function(){
$("#id").hide();
});
and do paste your code where you want to achieve it. Otherwise we can only put up theory here. We are not supposed to write entire code.
This is not a hard task to achieve..
Lets get started:
Step 1) Build a sample html content to be displayed on hover
<div class="toggle-display">
Your HTML
</div>
Step 2) Lets give it some css
.toggle-display {
opacity: 0.1; /*set to 0.0 to hide it completely */
width: 200px;
height: 50px;
border: 1px solid #333;
/* transitions */
-o-transition: all .3s linear;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all .3s linear;
}
.toggle-display:Hover {
opacity: 1.0;
}
3) Put it all together
<html>
<head>
<style>
.toggle-display {
opacity: 0.1; /*set to 0.0 to hide it completely */
width: 200px;
height: 50px;
border: 1px solid #333;
/* transitions */
-o-transition: all .3s linear;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all .3s linear;
}
.toggle-display:Hover {
opacity: 1.0;
}
</style>
</head>
<body>
<div class="toggle-display">
Your content
</div>
</body>
</html>
Here is a sample
Tried and works fine,
Hope this helped you (If so, mark this answer as ok please),
Best regards.
Alberto
Use Jquery:
$('.blog_title').on('mouseenter', function(){
$('ul').show();
});
In reality you want to animate and not just show(). It looks like the menu fades in and moves from the left.
Also you want to give your ul a class name otherwise this code will affect all the ul's in the HTML.
And you do the reverse on 'mouseleave'.
Related
With my current code, the white bar header is at the top when the page loads up. When you scroll, it fades, and when you scroll to the top, the white header is back. So I've made some progress.
What I'm trying to get is for there to be a transparent header when the scroll is at the top: (https://i.imgur.com/5DiVZpp.png)
And for the white bar header, the main one, to be sticky and follow all the way down, like this: (https://i.imgur.com/lhlGsW6.png)
and when you scroll back up, for it to fade back to the transparent header.
CSS:
#header{position:fixed;
left:0;top:0;right:0;height:106px;z-index:100;
-webkit-transition:background-color 0.2s ease-in-out;
-moz-transition:background-color 0.2s ease-in-out;
-ms-transition:background-color 0.2s ease-in-out;
-o-transition:background-color 0.2s ease-in-out;
transition:background-color 0.2s ease-in-out
}
#header .logo{position:absolute;left:0;top:0;width:162px;height:106px}
#header .logo a{display:block;position:absolute;left:50%;top:50%;
margin:-30px 0 0 -60px;width:120px;height:60px;
text-indent:-99999px;
background-image:url("header_logo.png")}
#header.scroll{border-bottom:1px solid #ededed;background:#fff;} /* so this is the transparent header?
#header.scroll .logo a{background-image:url("header_logo_transp.png")}
Javascript:
$(window).scroll(function () {
var sc = $(window).scrollTop()
if (sc == 0) {
$("#header").addClass("scroll");
//document.removeElementbyId(header); when I put this line in, the header wasn't there when the page first loads up-- kind of what I want, but I want the secondary header to be up there when sc==0
}
else {
$("#header").removeClass("scroll");
}
});
HTML:
<div id="header" class="scroll" style="top: 0px;">
<h1 class="logo">WEBSITE</h1>
The issue you're having may be due to the nature of 'scroll'. It doesn't get every single pixel value. Changing your if statement a little to include 1 as a check will help ensure the classes are added and removed when they should be.
Example: https://codepen.io/SROwl/pen/Mdbwpy
HTML:
<div class="container">
<div class="nav top">Nav Top</div>
</div>
SCSS:
body {
background: #000;
padding: 0;
margin: 0;
}
.container {
height: 4000px;
}
.nav {
background: lightgray;
padding: 15px;
height: 50px;
width: 100%;
border: 1px solid gray;
transition: 250ms ease;
&.top {
color: #fff;
background: transparent;
}
&.fixed {
position: fixed;
background: #fff;
}
}
jQuery:
$(window).on('scroll', function(){
var winTop = $(window).scrollTop(),
if (winTop >= 1) {
$('.nav').addClass('fixed').removeClass('top');
} else if (winTop <= 0) {
$('.nav').addClass('top').removeClass('fixed');
}
})
What I would like to accomplish is that when the image changes after the hover it stays like that for a few seconds, and then it returns to the original image.
What I would like to know is if there's a way to add that kind of delay. I have attached my code below.
<html>
<body>
<img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg'
width='142' height='162'
onmouseover="this.src='http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg';"
onmouseout="this.src=http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg';" />
</body>
</html>
Use CSS transitions with the transition-delay property.
.classname {
width: 100px;
height: 100px;
background-color: red;
transition-property: background-color;
transition-delay: 1s;
transition-duration: 0.1s;
}
.classname:hover {
transition-delay: 0s;
background-color: blue;
}
.image {
width: 142px;
height: 162px;
background-image: url('http://www.freedigitalphotos.net/images/img/homepage/87357.jpg');
background-size: 100% 100%;
transition-property: background-image;
transition-delay: 1s;
transition-duration: 0.1s;
}
.image:hover {
transition-delay: 0s;
background-image: url('http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg')
}
<div class="classname"></div>
<div class="image"></div>
Change your onmouseout event to call a JS function with setTimeout
setTimeout(function(){
this.src= "...";
}, 5000);
Where 5000 is the time in milliseconds you want to delay.
You could just use CSS transitions.
.button {
background-color: #222;
color: #fff;
padding: 14px 36px;
text-decoration: none;
transition: 0.6s background-color ease
}
.button:hover {
background-color: #555;
}
<a href='#' class='button'>Hover me</a>
See this example to change <img> src with onmouseover event and wait 3's then get back to original image onmouseout
//copy original img to variable
var original = $("img")[0].src;
//mouse over event
$("img").mouseover(function() {
$(this).fadeOut("fast").fadeIn("fast");
//change image
$(this)[0].src = "http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg";
});
//mouse out event
$("img").mouseout(function() {
var img = $(this);
//on mouse over wait 3 second and getback to original img
setTimeout(function() {
img.fadeOut("fast").fadeIn("fast");
img[0].src = original;
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg' width='142' height='162' />
There is a several ways to do this.
You can try the snippet below:
<div>
<img src='http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg' width='142' height='162'/>
<img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg' width='142' height='162'/>
</div>
div{
width:142px;
height:162px;
overflow: hidden; /*required*/
}
div img{
position: absolute;
transition: opacity .5s ease;
transition-delay: .5s; /*time of transition that you want*/
}
div img:hover{
opacity: 0;
}
Another way is just use a background of this images and manage each one.
Full example: jsbin
There are a few answers to similar questions, but none that are working for me while still giving me the desired effect, or none that I understand. So any help or guidance would be great
Here's a fiddle: http://jsfiddle.net/csoh1vzb/
Essentially what happens is when you hover over the cells quickly, the mouseleave function doesn't run and I'm left with the active state.
I've "half fixed" this, but it's still not as I would like it to be.
Adding this to mouseenter fixes the problem on the next hover:
$('.cell .hover').fadeOut();
$('.cell span').animate({ "marginTop" : "500px" });
(Not really a fix)
Any help would be great!
The problem is not the not fired mouseleave, the problem you are facing is that the animation takes 400ms (the default animation duration) to complete, which means that the animation is overriding the mouseleave css change directly after it has been applied when you leave the field within say 300ms
To avoid this, you need to stop the animation.
$('.cell span').stop();
$('.cell .hover').fadeOut();
Should do the trick.
As a Sidenote, if you're doing animations with javascript, better change to velocity.js which is far faster than jQuery's animate.
Whenever possible, it is always better to avoid the use of javascript and prefer using css rules.
You can easily replace your html generation and your fade animation using basic html and css, as you can see on this jsfiddle
Writing fully your html :
<a href="" class="cell cell-01" title="ONE">
<div class="hover"><span>ONE</span></div>
</a>
<a href="" class="cell cell-02" title="TWO">
<div class="hover"><span>TWO</span></div>
</a>
And defining most of the rules in your css :
.cell {width: 200px; height: 200px; background: #f00; float: left; display: block; overflow: hidden;}
.cell:hover .hover {
display:inline-block;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.hover {
display:inline-block;
width: 200px;
height: 200px;
background: #000;
text-align: center;
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.hover span {display: inline-block; padding: 10px 20px; font: bold 12px arial; font-style: italic; text-transform: uppercase; background: #222; border: 2px solid #fff; color: #fff;}
And you can easily reduce the size of your javascript, making the entire thing more stable and fast.
(function ($) {
$('.cell').on('mouseenter', function (){
var $this = $(this);
$(this).find('span').stop(true, false).animate({ "marginTop" : ($(this).innerHeight() / 2 - 19) + "px" });
}).on('mouseleave', function (){
var $this = $(this);
$(this).find('span').animate({ "marginTop" : "500px" });
});
}(jQuery));
Personally the first answer above is probably simpler and thus a better answer. But I like this because the code seems a bit cleaner overall.
HTML:
<div class="cell"> <span>ONE</span>
</div>
<div class="cell"> <span>TWO</span>
</div>
CSS:
.cell {
width: 200px;
height: 200px;
background: #f00;
float: left;
display: block;
overflow: hidden;
position:relative;
}
.hover {
width: 200px;
height: 200px;
background: #000;
text-align: center;
position: absolute;
top:-200px;
}
.hover span {
display: inline-block;
padding: 10px 20px;
font: bold 12px arial;
font-style: italic;
text-transform: uppercase;
background: #222;
border: 2px solid #fff;
color: #fff;
}
JavaScript:
(function ($) {
$('.cell').on('mouseenter', function () {
$(this).find('span').stop().animate({
"marginTop": ($(this).innerHeight() / 2 - 19) + "px"
});
$(this).find('.hover').stop().animate({
"top": 0
});
}).on('mouseleave', function () {
var $this = $(this);
$(this).find('.hover').stop().animate({
"top": "-200px"
});
$(this).find('span').animate({
"marginTop": "0px"
});
});
}(jQuery));
I cannot figure out how to change the colour of my menu elements when the "center" container or the "right" container is clicked (returning its state once clicked on again).
Currently my 3 lines that are within my menu are white, I want to change them to red when these "center" and "right" containers are clicked.
HTML for menu and containers:
<div class="menu">
<div class="line"></div>
<div class= "container" id= "center">
<h1 style="color:white"><a>LOREM IPSUM<a/></h1>
</div>
<div class="container" id= "right">
<h1 style="color:white"><a>LOREM IPSUM</a></h1>
</div>
CSS for menu elements:
.menu .line {
height: 5px;
width: 40px;
background: #fff;
position: absolute;
top: 22.5px;
left: 5px;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
z-index: 100;
}
.menu .line:after, .menu .line:before {
content: ' ';
height: 5px;
width: 40px;
background: #fff;
position: absolute;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.menu .line:before {
top: -10px;
}
.menu .line:after {
bottom: -10px;
}
Define new classes for the colors you want, e.g.
.red {
color: red !important;
}
.green {
color: green !important;
}
Then toggle them using jQuery:
$('#center').click(function() {
$(this).find('h1').toggleClass('red');
});
$('#right').click(function() {
$(this).find('h1').toggleClass('green');
});
Note: If you assign the original color using CSS then you don't need the !important.
I was unable to make sense of your sample html, so here's is an example demo using jQuery's .toggleClass
Add an onClick() method
Html:
<h1 style="color:white" onclick="changeColor(this);"><a>LOREM IPSUM<a/></h1>
and add this function in the <script> tag:
function changeColor(element){
element.style.color='red';
}
I've been working on finding a way to change out this <img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" by using a :hover with an image called repair_h.svg. What I initially was doing was placing a :hover on #repair like so #repair :hover and giving repair a background-image:url but this was not working and I think there are a few reasons why.
That was my initial process...Since that did not work I did some research on how to achieve this correctly and found a way to achieve it with JS. Which is way less hackie than some other css and html solutions I was looking into.
Using JS ended up working great for the purpose of what I need done although there's one piece that I'd like to add to this and I'm not quite sure how to do it.
I'd like to add a smooth transition between the image's when hovered on.
LINK TO MY CURRENT BUILD http://kapena.github.io/pp_web/
The icon I am working on here is called Repair Services
HTML
<li>
<a href="#">
<img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg"
onmouseover="this.src='http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg'"
onmouseout="this.src='http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg'" border="0" alt="About Plumbing Repairs in Honolulu Hawaii">
</img>
</a>
</li>
JS
function hover(element) {
element.setAttribute('src', 'http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg');
}
function unhover(element) {
element.setAttribute('src', 'http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg');
Also if any of you have any suggestions on away to perform a this entire task without JS and entirely with HTML and CSS then I'd be open to seeing how you'd do it :)
Thanks
You can do something like this with markup and css only:
HTML:
<a href="#">
<img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" border="0"
alt="About Plumbing Repairs in Honolulu Hawaii" />
</a>
CSS:
a {
background:url('http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg') 0 0 no-repeat;
width:150px;
margin:0;
padding:0;
float:left;
}
a img {
opacity:1;
transition:opacity .5s;
float:left;
}
a:hover img {
opacity:0;
transition:opacity .5s;
}
Demo
In CSS you cannot transition/animate directly between two images becuase CSS is incapable of interpolating keyframes between two none value-scale values.
That said, there are a few approaches using only CSS.
If you need to keep the same element/id the images are being transitioned on, the only approach would be to replace the image with a non-replaced element so you can use pseudo elements, then do e.g.:
span {
display: inline-block;
position: relative;
}
span:before,
span:after {
display: inline-block;
height: 300px;
width: 300px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
span:before {
content: url(http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg);
}
span:after {
opacity: 1;
transition: opacity 200ms ease-in;
content: url(http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg);
}
span:hover:after {
opacity: 0;
}
<span></span>
Alternatively if this isnt a consideration, a common approach is to overlap two images and transition the opacity of the correct image on hover, revealing the image underneath.
div:hover img:last-of-type {
opacity: 1;
transition: opacity 200ms ease-in;
}
div:hover img:last-of-type {
opacity: 0;
}
div img {
position: absolute;
top: 0;
left: 0;
}
<div>
<img src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" />
<img src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg" />
</div>
If you remove the blue background from the image(s) and keep it transparent, you can do this easily with css:
<style type="text/css">
ul {
list-style: none;
}
a {
display: inline-block;
width: 230px;
height: 240px;
background-color: #8bdafc;
/* background-image: url(/path/to/img/with-transparent-bg.svg) */
background-repeat: no-repeat;
-webkit-transition: background-color .3s;
-moz-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
}
a:hover {
background-color: #4fc3fb;
}
</style>
<ul>
<li>
</li>
</ul>
Don't set an src attribute on the img
<img src='' width=500 height=500>
img{
background: url("src1");
}
img:hover{
background: url("src2");
}