This page, on the top right, you'll see "English" if you hover over it you'll see a list of languages. You don't have time to get to the last language, the popup disappears. Basically this ul opens when you hover over #lang-select
#lang-select.header .block-content ul {
list-style-type: none;
padding: 10px 20px;
margin: 0;
background: #FFF;
}
I tried adding
#lang-select.header .block-content ul {
transition-delay: 3s;
transition-property: background;
}
also, I tried transition-property: padding; Also I tried applying transition-delay to #lang-select directly, did not work
The problem is with the z-index. The wrapper is going over the drop down menu so once your cursor moves from the header to the wrapper it thinks your hovering over the wrapper rather than the languages.
In the css add
#header {
z-index: 1000
}
Related
I try to have a sticky navbar with a dropdown-menu.
But the dropdown-menu is not showing.
I player around with this for too long now i guess.. and the biggest problem: in jsfiddle the dropdown-menu is now showing at all. However at my pc the dropdown-menu is showing as long as the 'sticky' class is not added, then becomes invisible, too.
Here in stackoverflow I read about overflow:hidden in the navbar causing the problem. Deleting that makes the dropdown-menu work but the navbar disappears.
-> dropdown-menu invisible
https://imgur.com/JYcswYq
-> navbar not shown
https://imgur.com/Gk5P6gN
I assume the error somewhere here but couldnt figure it out..
#navbar{
overflow: hidden;
font-size: 25px;
background-color: #333333;
}
main{
padding-top: 30px;
padding-bottom: 30px;
}
.dropdown-content {
right:0;
display: none;
position: absolute;
background-color: #333333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 48px;
}
There you can find a reduced part of my code. Here the dropdown doesnt show at all. (at my pc it at least shows as long as the sticky-class isnt added)
https://jsfiddle.net/xncjazky/3/
Hopefully i can get any advice on how to make the dropdown-menu popup even with the sticky-navbar.
Thank you.
Remove the overflow:hidden as you found out yourself, and add a height or min-height property to the #navbar selector, like so:
#navbar {
//overflow: hidden;
font-size: 25px;
background-color: #333333;
min-height: 48px;
}
The problem occurs because of the use of floats in your navigation items.
So another way to solve the issue without setting a fixed height to the #navbar, is changing your navigation items from float:left to display:inline-block.
Like so:
#navbar {
//overflow: hidden;
font-size: 25px;
background-color: #333333;
}
.lnav{
//float: left;
//display: block;
display: inline-block;
padding: 10px;
text-align: center;
color: #d9d9d9;
text-decoration: none;
cursor: pointer;
}
Hope this helps.
Cheers, Jeroen.
I had the same problem and solved it by placing the navbar inside the "div" element with "position: sticky".
For example:
<div style="top: 0; position: -webkit-sticky; position: sticky">
<nav>
<!-- here goes the code of navbar -->
</nav>
</div>
Removing overflow: hidden; will cause the background color of the main navbar to disappear if you have the li elements set to float: left; or float: right;.
I managed to fix the issue of content not appearing by making the .dropdown-content div class position: sticky; with the ul.topnav element. Problem is, a new glitch arises as the dropdown list appears with the background color assigned to it, acting as it should, except for one thing. The background color of the topnav list comes down around the dropdown, making the whole list fatter instead of showing a simple lonely dropdown menu.
I'm making a menu that slides in from the right side of the screen when the menu icon is clicked. Thing is, I don't know how to create the jquery for it. Right now I was able to make the menu slide to cover half the screen after pageload, but can someone help me change it to animate after menu icon is clicked and then slide back to the right(left:100%) when menu icon is clicked a second time?
I can get it to work on pageload but not with:
$("button").click(function(){
Here is what I have that works:
CSS
#menulayer {
height: 100%;
width: 100vw;
background-color: #999;
position: fixed;
z-index: 1;
left: 100%;
}
JQ
$(document).ready(function(){
$("#menulayer").delay(3000).animate({left:'50%'});
});
I used jQuery's on for the click binding, rather than click due to improved memory usage and for handling dynamic elements added after initial load. To show and hide the menu, a simple toggleClass does the trick. You can see in the CSS we set the menu's initial state offscreen, and then, once the open class is added, we smoothly animate it onscreen.
Note: when moving DOM elements around, you want to use translate rather than left, right, etc. Animations are smoother this way and you'll avoid the glitchy behavior (or "jank") sometimes involved with non-optimized animations. [1]
$('.toggle-button').on('click', function() {
$('.menu').toggleClass('open')
})
.toggle-button {
position: absolute;
top: 50px;
left: 50px;
border: 1px solid #333;
}
.menu {
background: red;
display: inline-block;
padding: 20px 40px;
position: fixed;
right: 0;
transform: translateX(100%);
transition: 0.5s transform;
}
.menu.open {
transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-button">toggle menu</button>
<ul class="menu">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
[1] High Performance Animations
this might be a weird one but what I am trying to do is make a div slide up from the bottom of the screen when someone clicks an image. To paint this clearer, imagine the Windows desktop, and if you click the start menu image/icon, instead of the start menu popping up from the button, the entire start menu bar would slide up exposing the entire div.
What I'm doing now (forgive me as I have just learned JS and jQuery from codecademy) is using the slideUp function. However, this is causing the div to slide down out of sight instead of up, exposing the entire div. The goal is that when you click the button the div slides up, and if you click the button again (or anywhere outside the div) it'll slide back down leaving the top 60px exposed like before.
Here's my JS/jQuery code:
$('#start').click(function() {
$('#nav').slideUp('slow');
});
My HTML
<div id="nav" class="nav">
<img id="start" src="img/btn_start.png">
</div>
My CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
font-family: Helvetica;
}
.nav {
width: 100%;
min-width: 100%;
height: 500px;
background: #000;
color: #fff;
position: absolute;
bottom: -440px;
text-align: center;
padding: 5px;
box-sizing: border-box;
overflow: auto;
}
.nav ul li {
display: inline;
}
.nav li {
padding: 20px;
margin-top: 80px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#start {
float: left;
}
Thanks, and I hope this isn't too ridiculous.
Instead of slideUp you should use
$('#start').click(function() {
$('#nav').animate({bottom: "0px"}, 1200);
});
...which will smoothly animate from the current location until the bottom is at 0px (i.e. aligned with the bottom of the containing element).
For even smoother results, checkout velocity.js (http://julian.com/research/velocity/), which does even smoother animation by synchronising with browser frame updates.
JsFiddle here: http://jsfiddle.net/11r46jnm/
You can also do this with CSS transitions instead. For stuff like this I like to hook my CSS into data attributes on the HTML:
<div id="nav" class="nav" data-nav-state="collapsed">
<img id="start" src="img/btn_start.png">
</div>
...use javascript to change the attributes...
$('#start').click(function() {
//toggle the nav element between two states
var currentState = $('#nav').attr("data-nav-state");
var newState = "collapsed";
if ( currentState === "collapsed" ) {
newState = "expanded";
}
$('#nav').attr("data-nav-state", newState);
});
Finally we use CSS to set the positions of the two states, and to ensure that transition is smooth. CSS transitions have much better performance than jQuery, so I recommend using them if you can:
#nav[data-nav-state=collapsed] {
bottom: -440px;
}
#nav[data-nav-state=expanded] {
bottom: 0px;
}
#nav {
transition: bottom 1.2s ease;
}
See this jsFiddle for a demo: http://jsfiddle.net/Lv2saepy/1/
I'm a newbie; need some help! I created a left-aligned navigation menu with a slide-out submenu. I'm happy with everything except for the sub-menu's height. How can I make the entire slide-out menu (the opaque one) go to 100% height of the entire screen? Want it to look like this: http://perezweddings.com/blog/
Here's my jsfiddle: http://jsfiddle.net/alh3168/hE6Sv/10/
Do I need to change something in here?:
div.menu ul.second li a {
width: 150px;
bottom: auto;
min-height: 100%;
background-color: #B2CC7F;
color: #00293E;
text-decoration: none;
display: block;
padding: 7px 10px 0 0;
text-align: left;
cursor: pointer;
cursor: hand;
background: #000;
background-color:rgba(0,180,180,0.3);
padding-left:20px;
font-family: Neou-Bold;
src: url('Neou-Bold.otf');
font-size:10px;
letter-spacing:1.6px ;
}
Right now the color is on the sub-menu anchors. We need to move that to the parent ul.second element, and then add CSS to make that element fixed and span from the top to the bottom.
div.menu ul.second {
background-color:rgba(0,180,180,0.3);
top:0;
position: fixed;
bottom:0;
}
Once that has been done, we need to update the anchor style to set the background color of sub-menu items to transparent by default since the background color is coming from the parent element.
div.menu ul.second li a {
background-color:transparent;
}
You'll probably want to add some padding to the div.menu ul.second element as well and there are some other things you may want to adjust, but you can quickly add this CSS to the bottom of your fiddle to see it working.
I have a sprite image for each list item (home, services and contact). I'm using CSS to move the position on hover. It works fine except I would like fade the transition instead of rapidly moving the position. I am trying to make it look like the button is being pushed in on hover. I would like to slow it down. I have been all day on this and not getting anywhere. Thanks for any help!
HTML
<ul id="navigation">
<li class="link1">Home</li>
<li class="link2">Services</li>
<li class="link3">Contact</li>
</ul>
CSS
li.link1 {
text-indent: -9999px;
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left top;
}
li.link1:hover {
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left bottom;
}
li.link2 {
Repeats itself...
Could you do it with relative positioning and CSS3 transitions?
li.link1 {
position: relative;
text-indent: -9999px;
background-image: url(http://www.rjdesigns.net/temp/images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
transition: margin 0.25s;
-moz-transition: margin 0.25s; /* Firefox 4 */
-webkit-transition: margin 0.25s; /* Safari and Chrome */
-o-transition: margin 0.25s; /* Opera */
}
li.link1:hover {
background-position: left bottom;
// These lines add height to the top of the li, so it doesn't
// glitch/vibrate if you hover on the top pixel or two
border-top: 2px solid transparent;
top: -2px;
// Increase margin by 2px on top and left
// Decrease by 2px on right so you don't shift other menu items
margin: 2px -2px 0 22px !important;
}
Demo:
http://jsfiddle.net/jtbowden/gP9kD/
Update Demo with all three links and simplified CSS for the li elements:
http://jsfiddle.net/jtbowden/gP9kD/1/
jQuery
If you want a true fade effect, you can do this with jQuery. I hacked together an example here:
http://jsfiddle.net/jtbowden/gP9kD/4/
This example creates clones of each li changes the background-positioning, and absolutely positions them under the current li elements and hides them. Then on hover, it fades the main li out (to almost zero, so it still stays active), and fades in the one underneath.
It is a little hacky, because the li clones still contain the link, etc. But it works, and demonstrates the principle.