I've been searching around and I haven't found any answers for my particular case. I want to have a search form aligned to the right of the page but for it always to be aligned with the div it is located in. I have resorted to absolute positioning but I would much rather find a cleaner way to do this with out me having to constantly change the value of the style "Top: ;"
Here is a link to the code: https://jsfiddle.net/nz4u376r/
And here is a snippet:
CSS:
/*----- Toggle Button -----*/
.toggle-nav {
display: none;
}
.toggle-nav-button {
color: #FFF;
padding: 12px;
transition: color 0.3s ease;
max-width: 45px;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.toggle-nav-button:hover {
color: #0d2c87;
background-color: #909f8e;
-webkit-transition: background .4s ease;
-moz-transition: background .4s ease;
-ms-transition: background .4s ease;
-o-transition: background .4s ease;
transition: background .4s ease;
}
#media screen and (max-width: 970px) {
.toggle-nav {
float: left;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
color: #FFF;
font-size: 18px;
text-decoration: none;
}
.active {
display: none;
}
}
/*-- Toggle Button End --*/
/*---- Main Nav CSS ----*/
/*Colors: #0d2c87 #7E8F7C | http://www.hexcolortool.com/7E8F7C#909f8e | */
.menu {
background-color: #7E8F7C;
height: 48px;
width: 100%;
}
nav ul {
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
max-width: 190px;
width: 100%;
}
nav a {
background: #7E8F7C;
color: #FFF;
display: block;
font: 16px/48px sans-serif;
text-align: center;
text-decoration: none;
}
.header-li:hover {
background: #909f8e;
color: #0d2c87;
-webkit-transition: background .4s ease;
-moz-transition: background .4s ease;
-ms-transition: background .4s ease;
-o-transition: background .4s ease;
transition: background .4s ease;
}
nav li ul li:hover a {
background: #909f8e;
color: #0d2c87;
-webkit-transition: background .4s ease;
-moz-transition: background .4s ease;
-ms-transition: background .4s ease;
-o-transition: background .4s ease;
transition: background .4s ease;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 11;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
nav li:hover ul {
opacity: 1;
top: 48px;
visibility: visible;
}
nav li ul li {
float: none;
}
nav li ul a:hover {
background: #909f8e;
}
/*-- Main Nav CSS End --*/
/*--- Nav SearchBar ---*/
.search-form {
display: inline-block;
position: relative;
margin-top: 8px;
margin-right: 8px;
float: right;
}
.search-form input {
width: 200px;
height: 30px;
padding: 0px 8px;
font-size: 13px;
float: left;
}
.search-form input:hover,
input:focus {
border-top: 1px ridge #3292E0;
border-bottom: 1px ridge #3292E0;
border-left: 1px ridge #3292E0;
}
.search-form button {
height: 30px;
/*#66a992 #0d2c87 */
color: #FFF;
border: none;
padding: 5px;
background-color: #0d2c87;
}
.search-form button:hover {
opacity: 0.8;
-webkit-transition: opacity .4s ease;
-moz-transition: opacity .4s ease;
-ms-transition: opacity .4s ease;
-o-transition: opacity .4s ease;
transition: opacity .4s ease;
}
.search-from-drop {
display: none;
}
#media screen and (max-width: 1250px) {
.search-form input {
width: 120px;
}
.active-search {
display: none;
}
.search-from-drop {
display: inline-block;
}
}
#media screen and (max-width: 1125px) {
.search-form {
display: none;
}
}
#media screen and (max-width: 840px) {
.search-form {
display: inline-block;
right: 5%;
position: absolute;
top: 72px;
}
.search-form {
float: left;
}
}
<nav class="menu">
<ul class="active">
<li>
<a class="header-li" href="">Home</a>
</li>
<li>
<a class="header-li" href="">Our Company</a>
<ul>
<li>Blank
</li>
<li>Blank
</li>
<li>Blank
</li>
</ul>
</li>
<li>
<a class="header-li" href="">Services</a>
<ul>
<li>Blank
</li>
<li>Blank
</li>
<li>Blank
</li>
</ul>
</li>
<li>
<a class="header-li" href="">Products</a>
<ul>
<li>Blank
</li>
<li>Blank
</li>
<li>Blank
</li>
</ul>
</li>
<li>
<a class="header-li" href="">Resources</a>
<ul>
<li>Blank
</li>
<li>Blank
</li>
<li>Blank
</li>
</ul>
</li>
</ul>
<ul class="toggle-nav">
<li>
<div class="toggle-nav-button" href="#">☰</div>
<ul>
<li>Home
</li>
<li>Our Company
</li>
<li>Services
</li>
<li>Products
</li>
<li>Resources
</li>
</ul>
</li>
</ul>
<form class="search-form">
<input type="text">
<button><span class="active-search">Search</span><span class="search-from-drop">🔍</span>
</button>
</form>
</nav>
I found my mistake and I figured I would answer my question.
The error was that I was making an absolute value of top and right when all I needed was an absolute value for right, so after changing...
This:
.search-form {
display: inline-block;
right: 5%;
position: absolute;
top: 72px;
}
Into this:
.search-form {
display: inline-block;
right: 5%;
position: absolute;
}
Everything works fine. No longer have to worry about changing specific values every time a height changes on the header or nav.
Thanks for your help!
Related
I have this sidebar menu with css and bootstrap:
(please reduce size of the iframe to see the menu button)
http://jsfiddle.net/s8hts3v7/11/
If you toggle the sidebar menu you can detect some glitch and the sidebar is not smoothing in the animation.
This bad effect or glitch error it is even more detectable with Firefox.
The classes that I used for this menu are:
/*sidebar nav*/
.navbar-toggle {
background: #CFD8DC;
color: #666;
}
.navbar-toggle .icon-bar {
background: #666;
width: 17px;
height: 3px;
}
#sidebar-wrapper {
background: rgba(0,0,0,.5);
bottom: 0;
z-index: 500;
-webkit-transition-property: background,top,right,bottom,left;
transition-property: background,top,right,bottom,left;
-webkit-transition-duration: .5s,0,0,0,0;
transition-duration: .5s,0,0,0,0;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
#sidebar-wrapper.active {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#sidebar-menu {
margin-left: -250px;
left: 0;
width: 250px;
background: #f5f5f5;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.5s ease-in 0s;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-ms-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 50px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
line-height: 55px;
font-size: 18px;
background: white;
text-indent: initial;
padding-left: 12px;
}
.sidebar-brand img {
width: 134px;
}
.sidebar-brand #menu-close {
font-size: 26px;
font-weight: 200;
display: inline-block;
vertical-align: middle;
color: #9E9E9E;
cursor: pointer;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
display: inline-block;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#sidebar-wrapper.active #sidebar-menu {
left: 250px;
width: 250px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
How can i fix this?
Comment or remove background: rgba(0,0,0,.5); on #sidebar-wrapper (it is overlaying body when toggled):
Link to your JSFiddle
Firefox:
Chrome:
$(document).ready(function() {
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
});
html {
-webkit-font-smoothing: antialiased;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #737373;
font-size: 14px;
-webkit-font-smoothing: antialiased;
background: #E9E9E9 !important;
}
/*sidebar nav*/
.navbar-toggle {
background: #CFD8DC !important;
color: #666 !important;
}
.navbar-toggle .icon-bar {
background: #666 !important;
width: 17px !important;
height: 3px !important;
}
#sidebar-wrapper {
/* background: rgba(0,0,0,.5); */
bottom: 0;
z-index: 500;
-webkit-transition-property: background, top, right, bottom, left;
transition-property: background, top, right, bottom, left;
-webkit-transition-duration: .5s, 0, 0, 0, 0;
transition-duration: .5s, 0, 0, 0, 0;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
#sidebar-wrapper.active {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#sidebar-menu {
margin-left: -250px;
left: 0;
width: 250px;
background: #f5f5f5;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.5s ease-in 0s;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-ms-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 50px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 55px;
line-height: 55px;
font-size: 18px;
background: white;
text-indent: initial;
padding-left: 12px;
}
.sidebar-brand img {
width: 134px;
}
.sidebar-brand #menu-close {
font-size: 26px;
font-weight: 200;
display: inline-block;
vertical-align: middle;
color: #9E9E9E;
cursor: pointer;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
display: inline-block;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#sidebar-wrapper.active #sidebar-menu {
left: 250px;
width: 250px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body id="fotieditor">
<div class="container-fluid">
<button id="menu-toggle" type="button" class="navbar-toggle toggle pull-left" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="sidebar-wrapper">
<div id="sidebar-menu">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<i id="menu-close" class="fa fa-times-circle-o"></i>
<img src="https://rp-static.com/www_mantaspersonalizadas/svg/mantas-personalizadas.svg" alt="">
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</body>
I have been playing around with trying to get the drop down hover menu to slide down the screen. For some reason, it only works with the first menu item and the others then just appear.
What is it that I am doing wrong?
$('.nav-main li ul').hide().removeClass('.drop-down');
$('.nav-main li').hover(function() {
$('ul', this).stop().slideDown(1000);
}, function() {
$('ul', this).stop().slideUp(1000);
});
.nav-main {
position: absolute;
top: 0;
height: 65px;
width: 100%;
text-align: center;
}
.nav-main ul {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 22px;
line-height: 100%;
font-family: 'Futura W01 Bold', sans-serif;
text-align: center;
text-transform: uppercase;
display: inline-block;
width: 90%;
height: inherit;
}
.nav-top {
position: relative;
margin: 0;
padding: 0 66px 0 50px;
float: none;
display: inline-block;
list-style: none;
height: inherit;
}
.nav-top:first-child {
padding-left: 0;
}
.nav-top:last-child {
background-image: none;
padding-right: 0;
}
.nav-top:last-child:after {
content: none;
}
.nav-top > a {
position: relative;
display: block;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active a {
color: #454545;
border-bottom: 4px solid #00e9d9;
text-decoration: none;
}
.nav-top ul {
/*display: none;*/
position: absolute;
left: -8.75px;
width: 105%;
top: calc(100% - 1px);
}
.nav-top:hover ul {
/*display: inline;*/
position: absolute;
top: calc(100% - 1px);
left: -8.75px;
width: 105%;
/*-moz-transition: all 1.2s ease-in-out;
-webkit-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
transition: all 1.2s ease-in-out; */
}
.nav-top li {
float: center;
background-color: #e9e9e9;
padding-top: 16px;
padding-bottom: 16px;
}
.nav-top li > a {
position: relative;
display: inline;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top:after {
display: block;
position: absolute;
left: 100%;
top: -17px;
width: 22px;
z-index: 1;
transform: translateX(-50%);
height: 100%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav-main" role="navigation">
<ul>
<li class="nav-top">Welcome</li>
<li class="nav-top">About
<ul class="drop-down">
<li>Services</li>
<li>Clients</li>
<li>Press</li>
<li>Leadership</li>
<li>Twitter</li>
</ul>
</li>
<li class="nav-top">Contact</li>
</ul>
<span class="nav-arrow"></span>
</nav>
JSfiddle
Remove the height:inherit; from .nav-main ul and it will solve the problem. The problem exists because the dropdown .drop-down inherits the height of the parent li, causing the slide animation to animate just the height of the parent li. I hope it makes sense.
Updated FIDDLE.
$('.nav-main li ul').hide().removeClass('.drop-down');
$('.nav-main li').hover(
function() {
$('ul', this).slideDown(1000);
},
function() {
$('ul', this).slideUp(1000);
}
);
.nav-main {
position: absolute;
top: 0;
height: 65px;
width: 100%;
text-align: center;
}
.nav-main ul {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 22px;
line-height: 100%;
font-family: 'Futura W01 Bold', sans-serif;
text-align: center;
text-transform: uppercase;
display: inline-block;
width: 90%;
}
.nav-top {
position: relative;
margin: 0;
padding: 0 66px 0 50px;
float: none;
display: inline-block;
list-style: none;
height: inherit;
/*background: transparent url(../images/nav-divide.png) no-repeat right center;*/
}
.nav-top:first-child {
padding-left: 0;
}
.nav-top:last-child {
background-image: none;
padding-right: 0;
}
.nav-top:last-child:after {
content: none;
}
.nav-top > a {
position: relative;
display: block;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active a {
color: #454545;
border-bottom: 4px solid #00e9d9;
text-decoration: none;
}
.nav-top ul {
display: none;
position: absolute;
}
.nav-top:hover ul {
display: inline;
position: absolute;
top: calc(100% - 1px);
left: -8.75px;
width: 105%;
/*-moz-transition: all 1.2s ease-in-out;
-webkit-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
transition: all 1.2s ease-in-out; */
}
.nav-top li {
float: center;
background-color: #e9e9e9;
padding-top: 16px;
padding-bottom: 16px;
/*
background: transparent url(../images/nav-divide.png) no-repeat right center;
background: transparent url(../images/nav-divide.png) no-repeat left center;*/
}
.nav-top li > a {
position: relative;
display: inline;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top:after {
content: url(../images/nav-divide.png);
display: block;
position: absolute;
left: 100%;
top: -17px;
width: 22px;
z-index: 1;
transform: translateX(-50%);
height: 100%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav-main" role="navigation">
<ul>
<li class="nav-top">Welcome
</li>
<li class="nav-top">About
<ul class="drop-down">
<li>Services
</li>
<li>Clients
</li>
<li>Press
</li>
<li>Leadership
</li>
<li>Twitter
</li>
</ul>
</li>
<li class="nav-top">Contact
</li>
</ul>
<span class="nav-arrow"></span>
</nav>
I want to mark a clicked item in my list. This works fine (test1 - test5) - but if I add some more item's (e.g. test6) to that list via JQuery's append, only test1-test5 that were there while loading the page, "use" the highlighting css functionality. How could I fix this?
$("#tracklist li").on("click", function() {
$('.highlight').removeClass('highlight');
$(this).addClass('highlight');
});
$("#test").click(function() {
$("#tracklist").append("<li class='list_style_tracklist_lastitem ui-sortable-handle'><a href='#'>test6</a></li>");
}
ol {
list-style-type: none;
margin: 0;
padding: 0;
height: 120px;
width: 450px;
overflow-y: auto;
overflow-x: hidden;
background: #e6e6e6;
}
li {
font: 200 15px/1.5 Helvetica, Verdana, sans-serif;
border-bottom: 1px solid #ccc;
border: 1px solid #d3d3d3;
background: #e6e6e6;
font-weight: normal;
padding: 0em 0em 0em 1.5em;
text-indent: 0.1em;
list-style: none;
background-repeat: no-repeat;
}
.list_style_tracklist_music {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAQAAABKIxwrAAAAvElEQVR4AWMgDygz2DLYoEOgmDYDMzblEQxzGGZhgRMZHBiYsCufiQmBGibBNRBWjtBAUDnzLEaEBnMCyllnNR3QWMwwA8QGykUSUM4xe90lixVw5RHDVfkMxplcxCoXmJO7c9OVQ3euPjNdTlA595xVF3/9+Q8ELz7qLCGkfIb64ifvQYo/fus7yjILKILfdJZZ8Vvmnek/6rGGFayYsFdnAOF0sDMIK0dAKiufhQuClRPOq4g8C5QnBwAAiy7V4BTvo9kAAAAASUVORK5CYII=');
}
ol li.list_style_tracklist_music a,
ol li.list_style_tracklist_video a,
ol li.list_style_tracklist_lastitem a {
text-decoration: none;
color: #000;
/*-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;*/
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;
display: block;
width: 450px;
}
ol li.list_style_tracklist_music a:hover,
ol li.list_style_tracklist_video a:hover,
ol li.list_style_tracklist_lastitem a:hover {
/*font-size: 18px;*/
background: #ffbb99;
}
.highlight {
background-color: #ffbb99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol id="tracklist">
<li class="list_style_tracklist_music">
test1
</li>
<li class="list_style_tracklist_music">
test2
</li>
<li class="list_style_tracklist_music">
test3
</li>
<li class="list_style_tracklist_music">
test4
</li>
<li class="list_style_tracklist_music">
test5
</li>
</ol>
<input type="button" name="test" value="test" id="test" />
First you bind your function to existing <li>s.
Then you create a new <li> (test6), which is obviously not binded!
The more simple here is to delegate binding to the parent <ol>, so any of its children is involved as soon as it exists:
$("#tracklist ol").on("click", function(e) {
$('.highlight').removeClass('highlight');
$(e.target).addClass('highlight');
});
I'm trying to create a nav bar which consists of the regular navigation elements and an indication bar which is located below the current page. My goal is to make this bar move under whichever element the user hovers on and automatically resize itself according to a pre-defined size (according to the word length maybe?). I built the nav bar itself, but I'm kind of clueless how to achieve this effect. Should I always calculate the current position of the mouse and add the difference between the current location and the hover location? Regarding to the resizability, this is a secondary goal, less significant.
This is what I've done so far:
Html:
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples</li>
<li>bananas</li>
<li>tomatos</li>
<li>onions</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
CSS:
#nav_ul a{
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul{
display: inline-block;
list-style-type: none;
}
#nav_ul li{
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover{
color: #4ad1fd;
}
#container{
position: relative;
left: 167px;
height: auto;
width: 530px;
top: 5px;
}
#bar{
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
JSfiddle
Something like in this image:
You're trying to create a lavalamp menu, checkout the example below...
/* ---- reset ------*/
html, body, div, a {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1; }
/* --- basic styles ----*/
body {
font-family: "Unica One";
font-size: 1.5em;
background: #f2f2f2;
text-shadow: 0 1px 0 white; }
/* --- for this example ----*/
.nav {
text-align: center;
overflow: hidden;
margin: 2em auto;
width: 480px;
position: relative; }
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
.effect {
position: absolute;
left: -12.5%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%; }
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%; }
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%; }
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%; }
/* ----- line example -----*/
.ph-line-nav .effect {
width: 90px;
height: 2px;
bottom: 36px;
background: #c6342e;
box-shadow: 0 1px 0 white;
margin-left:-45px;
}
<div class="ph-line-nav nav">
Home
About
Gallery
Contact
<div class="effect"></div>
</div>
Find more here http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/
Here's a jQuery solution: (JSFiddle for if the code snippet doesn't work)
function BarMove(el) {
var bar = $('#bar');
var width = el.outerWidth();
var left = el.offset().left;
bar.animate({
width: width,
left: left
});
}
var Current = $('#nav_ul li a.current'); // Set the current page
BarMove(Current);
$('#nav_ul li a').hover(function () {
BarMove($(this));
}, function () {
BarMove(Current);
});
#nav_ul a {
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul {
display: inline-block;
list-style-type: none;
}
#nav_ul li {
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover {
color: #4ad1fd;
}
#container {
position: relative;
left: 0;
height: auto;
width: 530px;
top: 5px;
}
#bar {
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples
</li>
<li>bananas
</li>
<li>tomatos
</li>
<li>onions
</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
It's not exact, so you'll need to tweak the numbers but functionality is what you're after as far as I'm aware.
In your CSS, you have #nav_ul a:hover so you could add border-bottom-style: solid; border-color:<color> and you would have a bar appear under your items. It wouldn't slide, or be animated. It will, however, put a colored bar under what ever they are hovering over.
My responsove menu works well in mobile menu, but I have one problem that when I resize browser back to large screen size. the mobile menu still appear. Does anybody know why?
Here is my code :
CSS
.main-navigation ul {
z-index: 999;
float: right;
font-size: 1rem;
}
.main-navigation ul>li {
float: left;
position: relative;
}
.main-navigation ul>li a {
color: #555;
height: 42px;
line-height: 42px;
margin-left: .5em;
padding-right: 1em;
position: relative;
}
.main-navigation ul>li ul {
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
position: absolute;
background: white;
left: -1em;
}
.main-navigation ul>li ul li {
float: none;
white-space: nowrap;
border-bottom: 1px solid rgba(0,0,0,0.2);
background: #f9f9f9;
}
.main-navigation ul>li ul li a {
padding: 0 1em;
margin-right: 0;
font-weight: normal;
}
.main-navigation ul>li ul li a::before {
content: '';
}
.main-navigation ul>li ul li ul {
border-top: 1px solid #fff;
position: absolute;
left: 100%;
top: -1px;
height: 21px;
line-height: 21px;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
}
.main-navigation ul>li:hover>ul {
opacity: 10;
filter: alpha(opacity=100);
visibility: visible;
}
.main-navigation ul>li:hover>a {
color: #e74c3c;
}
#media only screen and (max-width:479px) {
.main-navigation ul {
z-index: 999;
float: right;
font-size: 1rem;
}
.main-navigation ul>li {
float: left;
position: relative;
}
.main-navigation ul>li a {
color: #555;
height: 42px;
line-height: 42px;
margin-left: .5em;
padding-right: 1em;
position: relative;
}
.main-navigation ul>li ul {
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
position: absolute;
background: white;
left: -1em;
}
.main-navigation ul>li ul li {
float: none;
white-space: nowrap;
border-bottom: 1px solid rgba(0,0,0,0.2);
background: #f9f9f9;
}
.main-navigation ul>li ul li a {
padding: 0 1em;
margin-right: 0;
font-weight: normal;
}
.main-navigation ul>li ul li a::before {
content: '';
}
.main-navigation ul>li ul li ul {
border-top: 1px solid #fff;
position: absolute;
left: 100%;
top: -1px;
height: 21px;
line-height: 21px;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
}
.main-navigation ul>li:hover ul {
opacity: 10;
filter: alpha(opacity=100);
visibility: visible;
}
.main-navigation ul>li:hover>a {
color: #e74c3c;
}
}
HTML :
<a href="#" id="rwd-nav-btn" >☰</a>
<div class="rwd-nav"></div> <!-- end rwd-nav -->
<nav class="main-navigation">
<ul class="fr">
<li>home</li>
<li>articles</li>
<li>portfolio</li>
<li>
dropdown
<ul>
<li>home</li>
<li>articles</li>
<li>portfolio</li>
<li>
dropdown
<ul>
<li>home</li>
<li>articles</li>
<li>portfolio</li>
<li>
dropdown
</li>
<li>about</li>
<li>contact</li>
</ul>
</li>
<li>about</li>
<li>contact</li>
</ul>
</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
jQuery :
jQuery(document).ready(function(){
jQuery('.main-navigation ul:first-child').clone().appendTo('.rwd-nav');
jQuery('#rwd-nav-btn').click(function(event){
event.preventDefault();
jQuery('.rwd-nav').slideToggle();
});
There is no code which hides the menu. Instead of slideToggle, I suggest to add/remove a class like "closed" and "open" and set mymenu.closed to display:none and inside the media query set mymenu.open to display:block