I created a pen that has a nice slide effect between elements in menu.
<ul>
<li id="home"><a>home</a></li>
<li id="libra"><a>libra</a></li>
<li id="libra2"><a>libra22</a></li>
<div class="line"></div>
</ul>
ul {
list-style: none;
padding: 0;
background: black;
color: white;
}
ul li {
display: inline-block;
}
ul li:first-child {
margin-left: 0;
}
ul li a {
width: 100px;
text-align: center;
display: block;
}
.line {
width: 100px;
height: 5px;
background: red;
transition: all 500ms ease-in-out;
}
#libra:hover ~ div {
margin-left: 100px;
}
https://codepen.io/anon/pen/vPxmZV
However, that only works forwards, not backwards and it's not dynamic, you pre-set the margin amount of the underline to slide with transition.
Is there a way to make it work forwards and backwards, and be dynamic without javascript?
and if not, what would be the best clean way with javascript?
Explained
For example, currently it's hardcoded, so if you hover #libra your underline will go right by 100px, so currently I need to add that case for every element in the array, for example the next element will be margin left 200px, etc.
I have created it using Translate property:
Without hardcoding you'll have to use javascript with alot of calculations
nav {
height: 50px;
font-size: 20px;
padding: 10px;
width: 100%;
z-index: 1;
background:black;
}
nav ul,
nav li,
nav a {
display: inline;
text-decoration: none;
list-style: none;
outline: none;
color: ghostwhite;
}
nav ul:hover,
nav li:hover,
nav a:hover {
color: white;
text-decoration: none;
}
nav ul:nth-child(2):hover ~ .line,
nav li:nth-child(2):hover ~ .line,
nav a:nth-child(2):hover ~ .line {
-webkit-transform: translate(110px);
transform: translate(110px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav ul:nth-child(3):hover ~ .line,
nav li:nth-child(3):hover ~ .line,
nav a:nth-child(3):hover ~ .line {
-webkit-transform: translate(240px);
transform: translate(240px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav ul:nth-child(4):hover ~ .line,
nav li:nth-child(4):hover ~ .line,
nav a:nth-child(4):hover ~ .line {
-webkit-transform: translate(340px);
transform: translate(340px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav ul:nth-child(5):hover ~ .line,
nav li:nth-child(5):hover ~ .line,
nav a:nth-child(5):hover ~ .line {
-webkit-transform: translate(450px);
transform: translate(450px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav ul:nth-child(2):hover ~ .line,
nav li:nth-child(2):hover ~ .line,
nav a:nth-child(2):hover ~ .line {
-webkit-transform: translate(110px);
transform: translate(110px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav li {
margin: 0 20px;
display: inline-block;
}
nav ul {
position: absolute;
right: 20px;
}
nav .line {
margin-top: 5px;
width: 120px;
height: 3px;
background-color: white;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Quota</li>
<li>About</li>
<li>Contact</li>
<div class="line"></div>
</ul>
</div>
</nav>
Related
I want to give some style to my active hyperlink in navigation by making the active one opaque and others transparent.
The opacity value and other styles are exactly the same with my hover styling. When I hover on the hyperlinks the hovered element becomes opaque and the others become transparent. I want exactly the same thing for the active hyperlink, but I don't know why it's not working.
Any help will be appreciated.
$(document).ready(function() {
$('#header-nav ul li').on('click', '#header-nav ul li', function() {
$(this).addClass('active').siblings().removeClass('active')
});
});
#header-nav {
background-color: yellow;
color: var(--our-dark-color);
justify-content: space-between;
height: 70px;
background-image: linear-gradient(to right, #ffffb3, #ffff66, #ffff00, #b3b300);
width: 100%;
margin: 0 auto;
transition: .4s ease-out;
animation: nav-load var(--nav-load-time) ease-in;
align-items: center;
z-index: 10000;
}
#header-nav ul li {
position: relative;
zoom: 1;
-webkit-backface-visibility: hidden;
vertical-align: middle;
margin: 0 auto;
transition: .4s ease-out;
animation-name: nav-link-load;
animation-duration: var(--nav-link-load-time);
animation-timing-function: ease-out;
animation-fill-mode: forwards;
transform: scale(0);
}
#header-nav ul li.active {
opacity: .5;
}
nav .mainMenu li a {
font-weight: bold;
color: var(--our-dark-color);
padding: 21px;
display: inline-block;
text-decoration: none;
font-size: 2rem;
}
#header-nav:hover li:not(:hover) {
opacity: .5;
}
#keyframes nav-link-load {
0% {
transform: scale(0);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Home">
<div class="container-fluid">
<div class="row">
<nav id="header-nav">
<ul class="mainMenu">
<li class="active">test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</nav>
</div>
</div>
</div>
I've changed the transform: scale to 1.
Your issue came from the way you set up the eventListener.
This is what you've written:
$(document).ready(function() {
$('#header-nav ul li').on('click', '#header-nav ul li', function() {
$(this).addClass('active').siblings().removeClass('active')
});
});
What you need is this:
$(document).ready(function() {
$('#header-nav ul li').on('click', function() {
$(this).addClass('active').siblings().removeClass('active')
});
});
I removed the parameter that you entered after 'click', since you don't need it. You've already specified the element that you want to add the eventListener to at the beginning of the line.
I've also changed the CSS a bit to keep both the active element opaque, and the element being hovered over. If you don't want this, you don't need to make any changes to your CSS. Just fix the JS statement.
Here's a snippet of the changes:
$(document).ready(function() {
$('#header-nav ul li').on('click', function() {
$(this).addClass('active').siblings().removeClass('active')
});
});
#header-nav {
background-color: yellow;
color: var(--our-dark-color);
justify-content: space-between;
height: 70px;
background-image: linear-gradient(to right, #ffffb3, #ffff66, #ffff00, #b3b300);
width: 100%;
margin: 0 auto;
transition: .4s ease-out;
animation: nav-load var(--nav-load-time) ease-in;
align-items: center;
z-index: 10000;
}
#header-nav ul li {
position: relative;
zoom: 1;
-webkit-backface-visibility: hidden;
vertical-align: middle;
margin: 0 auto;
transition: .4s ease-out;
animation-name: nav-link-load;
animation-duration: var(--nav-link-load-time);
animation-timing-function: ease-out;
animation-fill-mode: forwards;
transform: scale(1);
opacity: 0.5;
}
#header-nav ul li.active {
opacity: 1; //This has been modified
}
nav .mainMenu li a {
font-weight: bold;
color: var(--our-dark-color);
padding: 21px;
display: inline-block;
text-decoration: none;
font-size: 2rem;
}
#header-nav ul li:hover {
opacity: 1; //This is new
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Home">
<div class="container-fluid">
<div class="row">
<nav id="header-nav">
<ul class="mainMenu">
<li class="active">test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</nav>
</div>
</div>
</div>
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!
I am trying to get the parent li (menu item) to widen (horizontally) on hover to fit all of the ul li items (submenu items) without hardcoding a width so no text is floating or cut off.
I am making a menu using an unordered list. Each submenu item is within the li tags of the main menu. My menu is horizontal and shows the submenu items when you hover over the elements.
I have tried various ways to try and get the li element to expand to the size of the submenu items or stay the same size if they are smaller. My clunky but working way was to hardcode a width of 22% on hover. I was wondering if there was a way to do this and to nicely fit the text rather than have a lot of white space. Hardcoding the width also causes menu items without submenu items to expand (I could work around this but I don't want to hardcode it to begin with).
I need to do this entirely in vanilla html, css, and javascript. It would also be nice if the solution were cross-browser compatible.
I apologize if my code is non-conventional, I have been trying to teach myself css. Thank you in advance.
The following is an example of my HTML/CSS (minus the links):
body {
margin: 0;
}
*{
font-family: Gotham Book, Arial, Helvetica, Sans-serif;
}
#navbar {
background-color: #f1f1f1;
text-align: center;
}
#navbaritems {
margin: 0 auto;
}
#navbaritems ul {
padding: 0;
width: 100%;
list-style-type: none;
margin: 0;
display: inline;
position: relative;
font-size: 0;
}
#navbaritems ul li {
display: inline-block;
white-space: nowrap;
text-align: center;
color: #000;
position: relative;
}
#navbaritems ul li ul {
width: 100%;
padding: 0;
position: absolute;
top: 6vh;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
text-align: center;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#navbaritems ul li ul li {
background-color: #f1f1f1;
display: block;
}
#navbaritems ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#navbaritems ul li:hover {
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
width: 22%;
}
#navbaritems ul li ul li:hover {
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
width: 100%;
}
#navbaritems ul li a {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
font-size: 1vw;
display: block;
height: 4vh;
line-height: 4vh;
color: #808080;
text-decoration: none;
padding: 1vh;
margin: 0;
}
#navbaritems ul li a:hover:not(.active) {
background-color: #82c986;
color: #ffffff;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
cursor: pointer;
display: block;
}
#navbaritems ul li a.active {
color: #ffffff;
background-color: #4CAF50;
}
<div id="navbar" class="addBottomShadow">
<div id="navbaritems">
<ul>
<li><a class="active">Home</a>
</li>
<li><a>Patient Eligibility</a>
<ul>
<li><a>Eligibility Tracker</a>
</li>
</ul>
</li>
<li><a>Claim Status</a>
</li>
<li><a>Remittance Advice</a>
</li>
<li><a>E-Claims Batch Status</a>
</li>
<li><a>Fees</a>
<ul>
<li><a>Update Fees</a>
</li>
<li><a>Reimbursement Report</a>
</li>
<li><a>Reimbursement Detail Report</a>
</li>
<li><a>Submit Fees</a>
</li>
</ul>
</li>
<li><a>Inquiries</a>
<ul>
<li><a>Customer Service Inquiries</a>
</li>
<li><a>COB Change Requests</a>
</li>
<li><a>Submit Inquiry</a>
</li>
</ul>
</li>
<li><a>Settings</a>
<ul>
<li><a>Procedure Sets</a>
</li>
<li><a>Eligibility Tracker</a>
</li>
<li><a>Claim Settings</a>
</li>
<li><a>Remittance Advice</a>
</li>
<li></li>
</ul>
</li>
<li><a>Other</a>
<ul>
<li><a>Provider Seminars</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
The big problem here is that the parent li element only knows to be as big as the main a until hover because the child ul has display:none; which means the width is effectively 0. Instead of using display:none; you could try forcing the height to be 0 and leaving the initial width. Then on hover, do height:inherit; to display the menu items. Remember to use overflow:hidden; so things don't go outside of the element when the height isn't big enough for them.
EDIT: Needed to do some more work, but I think this is what you are looking for.
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
I'm trying to create an effect like the right nav on this site:
http://dianabobar.com/
With jQuery. The way the color opens up from the middle is the effect I'm going for but unfortunately that site is done in Flash so I don't have the option of studying how it's done. I'm not really sure what to search for. I was thinking something like 'background radial animation jquery' or 'background color animation from center jquery.'
I also considered a CSS3 ease-in like they've detailed here (Expand background from center (CSS / Javascript)). The problem is that the answer on this question is only showing the CSS3 transition working horizontal when I'll need it to work vertically. I've worked with the JSFiddle that they were using on the answer (http://jsfiddle.net/SNzgs/) but I can only seem to get the transition to animate going down from the top and not out from the center. The code they have is:
.redline {background:red;height:10px;width:0;margin:auto;}
.container:hover .redline {
width:200px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
The code I tried was:
.redline {background:red;height:0px;width:10px;margin:auto;}
.container:hover .redline {
height:200px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
Thanks for your help!
My solution is similar to that of by matewka, but uses both :before and :after pseudo-elements. The example markup is as follow:
<nav>
<ul>
<li>Link</li>
</ul>
</nav>
For the CSS:
nav ul {
list-style: none;
width: 6em;
}
nav ul li {
background-color: #eee;
position: relative;
}
nav ul li:before,
nav ul li:after {
background-color: #333;
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%; /* Vertically positions pseudo elements in the center */
bottom: 50%; /* Vertically positions pseudo elements in the center */
transition: all .125s ease-in-out;
z-index: 50;
}
nav ul li a {
color: #333;
display: block;
padding: .5em 1em;
position: relative;
z-index: 100;
transition: all .125s ease-in-out;
}
nav ul li a:hover {
color: #eee;
}
nav ul li:hover:before {
top: 0; /* Forces :before to stretch to fill top half */
}
nav ul li:hover:after {
bottom: 0; /* Forces :after to stretch to fill bottom half */
}
http://jsfiddle.net/teddyrised/rRtmB/
You can easily do it with :after pseudo element and absolute positioning. Then you can combine height and top properties of that shading box.
I made a completely new fiddle: http://jsfiddle.net/SNzgs/5/ since yours was built to do the job horizontaly.
.container:after {
content: "";
display: block;
background: #ccc;
width: 100%;
height: 0;
top: 0.5em;
position: absolute;
left: 0;
transition: all 1s ease-out;
}
.container:hover:after {
top: 0;
height: 100%;
}
You can use the :after pseudo element to create the animating background:
CSS
ul {
margin: 0;
padding: 0;
}
ul > li {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
ul > li > a {
display: block;
padding: 10px;
color: #000000;
text-decoration: none;
position: relative;
z-index: 10;
-webkit-transition: all 400ms;
transition: all 400ms;
}
ul > li:hover > a {
color: #ffffff;
}
ul > li:after {
content: " ";
position: absolute;
top: 50%;
bottom: 50%;
left: 0;
right: 0;
background: #353535;
z-index: 0;
-webkit-transition: all 400ms;
transition: all 400ms;
}
ul > li:hover:after {
top: 0;
bottom: 0;
}
HTML
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
Demo
This works (though I'm not sure this is exactly what you want):
.container {height:100px;width:200px;background:#eee;position:relative;}
.container span {display:block;}
.greyline {background:#ccc;height:10px;width:200px;position:absolute;bottom:0;}
.redline {background:red;height:0;width:200px;margin:auto; top:5px;position:relative;}
.container:hover .redline {
height:10px;
top: 0px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
You can recreate a similar effect with few modifications at your fiddle:
<div class="container">
<span class="vertgrey">
<span class="vertredline"></span>
</span>
<span class="greyline">
<span class="redline"></span>
</span>
</div>
and the css:
.container {height:100px;width:200px;background:#eee;position:relative;}
.container span {display:block;}
.greyline {background:#ccc;height:10px;width:200px;position:absolute;bottom:45px;}
.redline, .vertredline {background:red;height:10px;width:0;margin:auto;}
.vertgrey {
background: #CCC;
height: 100%;
position: absolute;
width: 10px;
left: 90px;
}
.container:hover .redline {
width:200px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
.container:hover .vertredline {
height:100%;
width: 10px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
This is the link to the updated fiddle: http://jsfiddle.net/SNzgs/4/
Here's my shot at a solution for you:
fiddle: http://jsfiddle.net/itsmikem/gF28Y/
css:
.container {height:100px;width:200px;background:#eee;position:absolute;}
.greyline {display:block;position:relative;background:#000;height:0%;width:100%;}
.redline {display:block;position:relative;background:#f00;height:0%;width:100%;margin-top:50px;}
.container:hover .redline {
margin-top:0px;
height:100px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
html:
<div class="container">
<div class="greyline">
<div class="redline"></div>
</div>
</div>