I have horizontal menu on my website. I want the menu links to smoothly underline.
HTML
<nav id="nav_container">
<ul id="nav">
<li class="nav_item">Sportovci</li>
<li class="nav_item">Specialisté</li>
<li class="nav_item">Kluby</li>
<li class="nav_item">Obchody</li>
<li class="nav_item">Ligy</li>
<li class="nav_item">Články</li>
<li class="nav_item">Kontakt</li>
</ul>
</nav>
CSS
.nav_item {
display: inline-block;
margin: 0 10px;
}
.nav_item:after {
content: '';
display: block;
height: 1px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.nav_item:hover:after {
width: 100%;
background: #236fe8;
}
With this code the link will underline from left to right on hover, but when i go out with mouse it doesn't smoothly go back. I think it will be some JavaScript (jQuery), but don't know how.
I also want the clicked (active) link to stay underlined. How to do this?
I will be thankful for every kind of answer.
How about targeting the anchors instead of the .nav_items like so:
a:after {
content: '';
display: block;
height: 1px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
a:hover:after {
width: 100%;
background: #236fe8;
}
Here your updated jsFiddle.
replace your code with this one
.nav_item:after {
content: '';
display: block;
height: 1px;
width: 0;`enter code here`
background: transparent;
transition: width .5s ease, background-color .9s ease;
}
go to the following link for more help, i hope it will resolve your problem
http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
Related
I've done some research and it doesn't seem that I can find exactly what I'm looking for. My goal is to have a navigation bar on the bottom of my JS-app and when a user clicks a certain button, it would start an animation where the navbar travels from the bottom of the app to the top of the app. Here's some edits I made to illustrate what I mean:
default position
after user presses "profile" button, for example
Not sure what JS library would help me with this or if there is a code-sample. The key here is that I dont want it to shift on any button clicked, only certain ones. For example, if the user clicks on "Library" from my example above, I want it to stay on the bottom.
Might anyone know how I can accomplish this?
EDIT: so the reason im doing this is because this is an electron app that i want some content to be local, and some content to be remote. This is why when the users presses "Library" i would want the navbar to remain stationary. However if the user presses "Profile" it would shift to the top and the "content" window would act sort of like a web-browser in that it would load a page on a remote webserver. I hope that helps. And thanks for all the info!
EDIT 2: A little off-topic, but i get this weird padding that im not sure where is coming from:
weird space
EDIT 3:
Heres the HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="renderer.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="styles.css">
<body>
<script>
function toggleNavLocation() {
//alert('clciiikkkked');
$('nav').toggleClass('top');
}
</script>
<nav>
<div id="logo_container"><img id="logo"
src="./assets/images/poscon_nav.jpg" width="100px" height="55px" /></div>
<div id="navitems">
<ul>
<li id="dashboard">DASHBOARD</li>
<li id="pilotclient">PILOT CLIENT</li>
<li id="livemap">LIVE MAP</li>
<li id="community">COMMUNITY</li>
<li id="profile" onclick="toggleNavLocation()">PROFILE</li>
<li id="training">TRAINING</li>
<li id="support">SUPPORT</li>
<li id="library">LIBRARY</li>
</ul>
</div>
</nav>
<div id="right_content">
<div id="user_pane">
<span id="username"></span>
</div>
</div>
<div id="center_content">
</div>
<div id="left_content">
</div>
</body>
</html>
CSS:
body {
font-family: "Arial", Serif;
background-color: rgb(27, 27, 27);
overflow-x: hidden;
overflow-y: hidden;
}
nav {
position: absolute;
bottom: 0;
left: 0;
width:850;
height:75px;
background: rgb(27, 27, 80);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#dashboard, #pilotclient, #livemap, #community, #profile, #training,
#support, #library, #search_img {
font-size: 11px;
color: rgb(81, 81, 81);
padding-top: 22px;
display: inline-block;
width: 75px;
height:75px;
background:rgb(27, 27, 27);
text-align:center;
}
#dashboard:hover, #pilotclient:hover, #livemap:hover, #community:hover,
#profile:hover, #training:hover, #support:hover, #library:hover {
background: #252525;
}
#logo_container {
display: inline-block;
position: absolute;
left: 10px;
bottom: 2px;
}
#navitems {
display: inline-block;
margin-left: 150px;
height: 100px;
}
#right_content {
width: 250px;
height: 575px;
position: absolute;
top: 0px;
right: 0px;
background-color: red;
}
#center_content {
width: 500px;
height: 575px;
position:absolute;
top: 0px;
right: 250px;
background-color: blue;
}
#left_content {
width: 250px;
height: 575px;
position:absolute;
top: 0px;
left: 0px;
background-color: green;
}
#user_pane {
width: 250px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background-color: green;
}
#username {
width: 200px;
height: 25px;
position: absolute;
top: 175px;
left: 20px;
text-align: center;
background-color: white;
}
You can use some JS to add a class to your nav bar to do the animation, and you can add this class when clicking on a button with specific IDs.
Below is a snippet that demonstrates this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
-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 {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
If you don't want it to animate, but just jump to top or bottom, then you can remove all of these lines:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
Here is a snippet demonstrating this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
These examples us some JQuery, but if you want pure JS, you should be able to port it over to Vanilla with a bit of thought put into the code I have supplied.
It seems pretty straight forward but we need to know which property did you use to position the navbar at the bottom?. Best solution would be to create two css Properties of different properties in flexbox behavior then just use JavaScript to change the nav id corresponding the properties when the profile is clicked.
You can animate the navbar to slide between 2 vertical positions with css as such:-
#keyframes animatebottom {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
Modify the "bottom" property to suit your page height and other requirements.
I have an HTML menu element that I am currently animating using javascript and CSS. The menu's max-height is set to 0, with overflow: hidden.
<div class="menu">
The current CSS animation:
.menu {
-webkit-transition: max-height 0.4s ease;
-moz-transition: max-height 0.4s ease;
transition: max-height 0.4s ease;
}
In javascript, I am changing the menu max-height when a button is clicked.
This all works fine, except I would like to reveal the menu from the bottom to the top, instead of the top-down. Can this be done in simple CSS or JS?
You can transition scaleY() instead, and use transform-origin
div {
transform-origin: 0 100%;
width: 100px;
height: 100px;
background: black;
transition: transform .5s;
transform: scaleY(0);
}
body:hover div {
transform: scaleY(1);
}
<div></div>
Michael already provided a very elegant solution but it has the problem of scaling all content.
I just want to provide another approach: When using position:absolute, you can set bottom:0 to make it reveal from the bottom. I used height in the demo, because it's a bit easier to get the dimension how you want them, but max-height generally works just as fine as well.
Advantage: content does not scale
Disadvantage: needs positioning and some fixed height declarations
Whatever works best for you.
.menu {
background:#bada55;
transition: all 0.4s ease;
height:0;
overflow:hidden;
position:absolute;
bottom:0;
width:100%;
}
.container:hover .menu {
height:30px;
}
.container{
position:relative;
border:1px solid red;
height:30px;
}
<div class="container">
<div class="menu">
Menu content
</div>
</div>
Another possibility is to simply animate the positioning. Here you just manipulate the top to achieve the sliding effect.
.menu {
background: #bada55;
transition: all 0.4s ease;
overflow: hidden;
position: relative;
width: 100%;
padding:10px;
height:40px;
box-sizing:border-box;
top:100%;
}
.container:hover .menu {
top:0;
}
.container {
border: 1px solid red;
overflow:hidden;
height:40px;
}
<div class="container">
<div class="menu">
Menu content
</div>
</div>
You could use flexbox. You would need to align it to the bottom using align-items: flex-end;.
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
document.querySelector('.menu').classList.toggle('active');
});
.menu {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 1s ease;
-moz-transition: max-height 1s ease;
transition: max-height 1s ease;
background: #eee;
display: flex;
align-items: flex-end;
}
.menu.active {
max-height: 300px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
ul li {
}
<button>Toggle Menu</button>
<div class="menu">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4 (last item)</li>
</ul>
</div>
For reference, here is how the menu works without the flexbox aligning:
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
document.querySelector('.menu').classList.toggle('active');
});
.menu {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 1s ease;
-moz-transition: max-height 1s ease;
transition: max-height 1s ease;
background: #eee;
}
.menu.active {
max-height: 300px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
}
<button>Toggle Menu</button>
<div class="menu">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4 (last item)</li>
</ul>
</div>
I am attempting to create this mobile menu.
https://anythinggraphic.net/responsive-mobile-navigation-menu/
I have added all of the code and when I get the page into a mobile viewport, the page does nothing but show the two sets of periods "...". Unlike in the snippet, the page actually shows the list, just when it gets to the listed viewport, it shows the periods. I have the meta viewport code implemented and the Jquery vocab.
What am I doing wrong?
$(document).ready(function(){
$(function() {
// Insert Responsive Navigation Icon, Close Icon, and Overlay
// If you have access to your HTML, you should put this directly into your markup.
$('<div class="responsive-nav-icon" />').appendTo('.row.one');
$('<div class="responsive-nav-close" />').appendTo('nav');
$('<div id="overlay" />').insertAfter('footer');
// Navigation Slide In
$('.responsive-nav-icon').click(function() {
$('nav').addClass('slide-in');
$('html').css("overflow", "hidden");
$('#overlay').show();
return false;
});
// Navigation Slide Out
$('#overlay, .responsive-nav-close').click(function() {
$('nav').removeClass('slide-in');
$('html').css("overflow", "auto");
$('#overlay').hide();
return false;
});
});
});
.responsive-nav-icon::before,
.responsive-nav-close::before {
color: #93a748;
content: "\f0c9";
font-family: FontAwesome;
font-size: 22px;
position: relative;
}
.responsive-nav-close::before {
color: #93a748;
content: "\f00d";
font-size: 18px;
}
.responsive-nav-icon {
background: #fff;
line-height: normal;
padding: 5px 8px 4px;
top: 5%; left: 5%;
}
.responsive-nav-icon:hover,
.responsive-nav-close:hover {
opacity: .7;
}
.responsive-nav-close {
top: 10px; right: 10px;
}
.responsive-nav-icon,
.responsive-nav-close {
cursor: pointer;
display: none;
}
#overlay {
background: 0 0 rgba(0, 0, 0, 0.8);
display: none;
height: 100%;
position: fixed;
top: 0; left: 0;
-moz-transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
width: 100%;
z-index: 90;
}
#media only screen and (max-width: 960px) {
.responsive-nav-icon,
.responsive-nav-close {
display: block;
position: absolute;
z-index: 1;
}
nav {
height: 100%;
padding: 20px;
position: fixed;
top: 0; left: -400px;
-moz-transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
width: 0;
}
nav.slide-in {
left: 0;
overflow-y: scroll;
width: 280px;
z-index: 100;
}
nav .menu-item {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="site-header" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div class="wrap">
<nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation">
<ul class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
About
</li>
<li class="menu-item">
Blog
</li>
<li class="menu-item">
Login
</li>
</ul>
</nav>
</div>
</header>
<main class="content" itemprop="mainContentOfPage" role="main">
...
</main>
<footer class="site-footer" itemtype="http://schema.org/WPFooter" itemscope="itemscope" role="contentinfo">
...
</footer>
Looks like you are not linking the responsive jquery file ... css-jquery-responsive-mobile-navigation-menu.js
So I want this div to fade another div that has a black background at 0.5 opacity over it. But when i hover it ignores the image already in the div and fills a black then fades the other div. so it goes Image --> Solid black div --> then fades my second div.
https://jsfiddle.net/70e890e6/
HTML:
<div class="box1">
<div class="img_hover_effect"></div>
<img src="images/portfolio/charity.png" class="box1_img">
<img src="images/portfolio/charity/2.png" class="box1_img2">
</div>
CSS:
.img.img_hover_effect {
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
JQuery:
$(document).ready(function(){
$('.box1').on('mouseenter', function() {
$('.img_hover_effect').fadeIn(1000);
});
});
You can use jQuery hover like this :
$('.box1').hover(function() {
$('.hover').fadeIn(1000);
}, function(){
$('.hover').fadeOut(1000);
});
and some css changes :
.box1 {
position:relative;
height: 400px;
width: 350px;
margin: 0 auto;
margin-top: 100px;
float: left;
overflow: hidden;
}
.tree {
height: 100%;
width: auto;
display: block;
position: relative;
}
.hover {
position:absolute;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
display: none;
z-index: 10;
}
JSFIDDLE : https://jsfiddle.net/70e890e6/4/
You could use a CSS pseudo-class for the desired hover effect. I'd recommend applying the class directly to the images you wish to have the hover effect rather than overlaying with another div.
.hover-effect:hover{
background-color: #000000; //or whatever colour fade you are looking for
opacity: 0.5;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
When I hover a div at the bottom, which only is shown a little bit, (div has width:100%;), I want this div to move up with a mouseovereffect, and the same time push the logo, which is in the center of the screen, upwards. I want to use jQuery, because nothing else works. When the mouse is off the div, I want the div to fall back down to hiding. They are two div's inside the body.
Here is parts of the html and css: code
I hope someone knows how to make a javascript to make this hover function where hovering a div moves another div, then goes back to normal.
Does this help
using the jquery animate you can animate the movement of divs easily..
<div id="box1"></div>
<div id="box2"></div>
<style type="text/css">
#box1
{
width: 100px;
height: 100px;
background-color: red;
}
#box2
{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 10px;
}
</style>
<script type="text/javascript">
$("#box1").hover(function(){
//alert("hover");
$("#box2").animate({marginLeft: "200"});
});
$("#box1").mouseleave(function(){
$("#box2").animate({marginLeft: "0"});
});
</script>
There are few changes which need to be made in your code,
1) You have given class boks1 in jquery , but such class does not exist in your code.
2)you can combine both mouseover and mouseout in hover function itself.
Jquery
$(document).ready(function () {
$(".box1").hover(function () { // on hover
$(".box").css("margin-top", "-20px");
},function() {//on mouseout
$(".box").css("margin-top", "20px");
});
});
Something like this should work (if I understand your question).
I only changed the jQuery and one line of the CSS (the last line in .box was changed to transition: background 0.4s 0.5s, margin 0.4s;).
$(document).ready(function () {
$(".textarea").hover(
function () {
$(this).height($(this).height() + 200);
$(".box").css("margin-top", "-200px");
},
function () {
$(this).height($(this).height() - 200);
$(".box").css("margin-top", "");
}
);
});
#charset "UTF-8";
/* CSS Document */
html {
background: url(bilder/backnormal.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
margin: 0;
padding: 0;
}
.textarea {
background: rgba(255,255,255,0.5);
width: 100%;
float: left;
position: relative;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.box1, .box2 {
color: #666;
height: 57%;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
text-align: left;
padding-left: 350px;
transition: background-color 0.5s ease-in-out;
float: left;
}
.box1:hover, .box2:hover {
background: rgba(255,255,255,0.2);
transition: background-color 0.5s ease-in-out;
}
/*________*/
.box {
width: 300px;
height: 400px;
position: relative;
background: rgba(255,255,255,0);
display: inline-block;
float: left;
margin-top: 10%;
margin-bottom: 10%;
margin-left: 35%;
margin-right: 35%;
cursor: default;
text-align: center;
-webkit-transition: background 0.4s 0.5s;
transition: background 0.4s 0.5s, margin 0.4s;
}
.box:hover {
background: rgba(255,255,255,0.2);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.logo {
width: 90%;
padding-top: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="menu">
</div>
<div class="box">
<img src="bilder/logouten.png" class="logo" />
</div>
<div class="textarea">
<div class="box1">
<h1>hello</h1>
<p>textexttextextextextexttextextxtxtexetxtextextextetex</p>
</div>
<div class="box2">
<h1>hello again</h1>
<ul>
<li>textext</li>
<li>haethaethaethaefgae</li>
<li>wordswordswords</li>
</ul>
</div>
</div>
<footer>
</footer>
</body>
</html>
Here is my solution:
$(".textarea").hover(
function () {
$('.textarea, .box').stop().animate({top: '-200px'});
}, function (){
$('.textarea, .box').stop().animate({top: '0'});
});
see Fiddle
For your information: Your code did not work because of typo in your jQuery selectors. I also mentions that you are using float left a certain time that makes no sense because you overrule it with other styles.
I'm animating the top position because the margin will not do the right thing. When using margin the animation stops when there is no space.
I'm trigger the hover on the texarea becaus it covers the hole width. When using the .box itselfe then you will loose the focus during the hover effect. This will end up in a jumping effect.
I also us the stop function to clear the quehe otherwhise every hover event will be stored an triggerd (makes also an jumping effect)
So my snippet may give you an idea of how to achieve your needs.