You know how Twitter's menu does a slide in from the BOTTOM of their bottom-border? I'm trying to do the same with transitions on css3 and my border-bottom slides in from the top to bottom AT the bottom when I want it go slide from the bottom to the top AT the bottom like Twitter's menu.
Here's my fiddle: http://jsfiddle.net/8emkgzyb/
ul {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
padding: 0px;
display:inline;
}
ul li a {
text-decoration: none;
font-size: 25px;
padding: 4px;
display:inline;
color: #000;
transition: all .3s;
line-height: 20px;
border-bottom-style: solid;
border-bottom-color: red;
border-bottom-width: 0px;
}
ul li a:hover {
transition: all .3s;
border-bottom-style: solid;
border-bottom-color: red;
border-bottom-width: 4px;
}
html, body {
margin: 0;
padding: 0;
}
and HTML
<ul>
<li>Home</li>
<li>About</li>
<li>Locations</li>
</ul>
something like that?
I don't know if I understood it correct.
JSFIDDLE
ul li a {
height: 24px;
text-decoration: none;
font-size: 25px;
padding: 4px;
color: #000;
transition: all .3s;
line-height: 20px;
border: 0px solid red;
display: block;
}
ul li a:hover {
transition: all .3s;
height: 20px;
border-bottom: 4px solid red;
}
Related
There is a navigation menu, the design is as given in the image below.
Now, when I hover on About Us sub-menu gets open.
But when I try to move the cursor to the sub-menu item, the sub-menu gets closed - the reason being that hover is being removed from li.
I want the menu to remain open till the cursor reaches the sub-menu item.
Please Note:The space between Menu and sub-menu has to be kept as it is (As indicated with red border in the image above).
You can find the link to the code, here
Any help would be appreciated!
A quick solution:
ul#nav li:hover > ul {margin: 40px 0 0 0; border-top: 10px solid #b58d69; }
Cheers!
You have to make li a bit higher, so it will cover free space between sub-menu and this particular li a. The simplest solution was in this case to add margin to main a tag inside li. There will be more solutions how to achieve this effect (adding padding inside li and applying background-color to a tag), but this one is the fastest one.
Search for "added" and "changed" notes in css below
#menu {
width: 960px;
height: 40px;
clear: both;
}
ul#nav {
float: left;
width: 960px;
margin: 0;
padding: 0;
list-style: none;
background: #b58d69 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li {
display: inline-block; /*changed*/
padding-bottom: 10px; /*added*/
position: relative; /*added*/
}
ul#nav li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
margin: 0;
padding: 0px 20px;
background: #b58d69 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li a.plus_a { /*added*/
position: absolute;
}
ul#nav .current a, ul#nav li:hover > a {
color: #b58d69;
text-decoration: none;
background: #30251b;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav ul {
display: none;
}
ul#nav li:hover > ul {
position: absolute;
width: 920px;
height: 45px;
position: absolute;
margin: 50px 0 0 0;
background: #fff;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 45px;
color: #b58d69;
text-decoration: none;
margin: 0;
padding: 0 20px 0 0;
background: #fff;
}
ul#nav li:hover > ul li a:hover {
color: #30251b;
text-decoration: none;
text-shadow: none;
}
ul#nav li:hover > ul {
display:block !important;
}
I have done something like what you are asking for and this might give you an idea. Saw it in a tutorial on youtube fro css only drop down. You could use the idea behind this to solve your problem. But this works for when user clicks on the link.
.fixed-nav-container {
height: 90px;
width: 100%;
background-color: #111;
position: fixed;
z-index: 16;
}
.fixed-nav-container:hover {
opacity: 1;
}
.fixed-nav .active {
padding: 23px 0px;
background-color: #2a2730;
box-shadow: inset 0 3px 7px black;
}
.fixed-nav {
width: 100%;
height: 70px;
font-family: Arial, Helvetica, sans-serif;
}
.fixed-nav ul {
display: block;
text-align: center;
}
.fixed-nav ul li {
display: inline-block;
padding: 20px 15px;
font-weight: bold;
width: 15%;
border-right: 2px solid #2a2730;
}
.fixed-nav ul li:last-child {
border-right: 0px;
}
.fixed-nav ul li a {
text-decoration: none;
color: silver;
transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
padding: 10px 0px;
}
.fixed-nav ul li a:hover {
font-size: medium;
transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
}
.fixed-nav-content {
position: absolute;
top: 70px;
overflow: hidden;
background-color: #111111;
color: #FFFFFF;
max-height: 0px;
}
.fixed-nav-content a {
text-decoration: none;
color: #FFFFFF;
}
.fixed-nav-content a:hover {
background-color: silver;
box-shadow: inset 0 3px 7px black;
color: #2a2730;
}
.fixed-nav-content:active {
max-height: 400px;
}
.fixed-nav-sub ul {
padding: 0px;
list-style-type: none;
text-align: left;
}
.fixed-nav-sub ul li {
width: 20%;
}
.fixed-nav-sub ul li a {
padding: 10px;
display: inline-block !important;
background-color: #2a2730;
box-shadow: inset 0 3px 7px black;
}
.nav-item:focus {
background-color: #2a2730;
padding: 10px;
box-shadow: inset 0 3px 7px black;
}
.nav-item:hover ~ .fixed-nav-content {
max-height: 400px;
transition: max-height 0.4s linear;
}
<div class="fixed-nav-container">
<nav class="fixed-nav">
<ul>
<li>
About
<div class="fixed-nav-content">
<div class="fixed-nav-sub">
<ul>
<li>About Us</li>
<li>Meet The team</li>
<li>Recent Projects</li>
</ul>
</div>
</div>
</li>
<li>
Services
<div class="fixed-nav-content">
<div class="fixed-nav-sub">
<ul>
<li>Civil Works</li>
<li>Electrical</li>
<li>Water Engineering</li>
<li>Telecoms</li>
<li>Info. Technology</li>
<li>Renewable Energy</li>
<li>Consulting</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
I got a little problem when using a border-bottomwith a hover-effect on my navbar.
Is there any way to stop that? Or, lets say, give the Navbar the height it would actually by while hovering?
I would preffer a solution for not changing the height on hovering, but I'm open for anything.
Here is a JSFiddle of my Navbar: https://jsfiddle.net/ay3u7trd/
Thanks!
Add border-bottom: 3px solid RGBA(0,0,0,0); to your a { }. This will add the 3px padding to all of your hyperlinks without applying a specific color (the background color native to the object will appear).
Then once the :hover effect takes place it just shows up right there, since the border is already present you have no weird height issues.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
border-bottom: 1px solid #121214;
z-index: 10;
text-transform: uppercase;
}
li {
float: left;
border-right: 1px solid #121214;
text-decoration: none;
}
a {
color: #ff8800;
border-bottom: 3px solid RGBA(0,0,0,0);
}
a:hover {
color: #ff8800;
text-decoration: none;
border-bottom: 3px solid #1290FF;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #ff8800;
text-decoration: none;
color: #121214;
transition: background 0.3s ease-in;
}
.active {
background-color: #ff8800;
color: #121214;
text-decoration: none;
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Add a default border bottom to all of them and make it the same color as the background.
a {
color: #ff8800;
border-bottom: 3px solid #333;
}
a:hover {
color: #ff8800;
text-decoration: none;
border-bottom-color: #1290FF;
}
Updated demo
UPDATE – Don't forget to change the bottom border color on the active element
.active {
border-bottom-color: #ff8800;
}
Or you make the default border color transparent (probably the better solution)
a {
color: #ff8800;
border-bottom: 3px solid rgba(0,0,0,0);
}
The right answer depends on the UX you want to achieve. The easiest way would be to move the border to the <a> element (or to move the hover to the <li> element). And use a 3px border in all cases-- black for non-hovered, blue for hovered.
Like this: https://jsfiddle.net/sh5a8v6y/
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
text-transform: uppercase;
}
li {
float: left;
border-right: 1px solid #121214;
text-decoration: none;
}
a {
color: #ff8800;
border-bottom: 3px solid #121214;
}
a:hover {
color: #ff8800;
text-decoration: none;
border-bottom: 3px solid #1290FF;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #ff8800;
text-decoration: none;
color: #121214;
transition: background 0.3s ease-in;
}
.active {
background-color: #ff8800;
color: #121214;
text-decoration: none;
}
a:hover {
color: #ff8800;
text-decoration: none;
border-bottom: 3px solid #1290FF;
padding-bottom:11px;
}
Fiddle
One simple approach is to change the ul properties as follows:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
border-bottom: 1px solid #121214;
z-index: 10;
text-transform: uppercase;
height: 48px;
}
I want to have a border (looks like underline) that moves up on hover.
So if this is a link:
LINK
Then if I hover on it
LINK
""""
Example from the website:
http://matthias-schoenaerts.com/
(navigation bar)
I want it as simple as possible.
This is what I came up with:
http://jsfiddle.net/Lxxqz3pL/
HTML:
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
CSS:
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: center;
margin: 0 0 3em 0;
left: 0;
padding: 0;
list-style: none;
background-color: #333333;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position: absolute;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
}
#nav li a:hover {
transition: border .5s ease-in;
background-color: #fff;
border-bottom: 3px solid red;
}
/* End navigation bar styling. */
Here is updated CSS, does it what you trying to get?
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: center;
margin: 0 0 3em 0;
left: 0;
padding: 0;
list-style: none;
background-color: #333333;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position: absolute;
overflow: hidden;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
}
#nav li a:after{
display:block;
width:100%;
height:0px;
content:" ";
border:1px solid red;
position: relative;
top:10px;
}
#nav li a:hover:after{
transition: 0.5s ease-in;
transform: translate(0px, -10px);
}
/* End navigation bar styling. */
I've modified your code in areas to get the desired effect
DEMO http://jsfiddle.net/Lxxqz3pL/3/
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
padding: 22px 0 35px;
color: #a3a3a3;
border-bottom: 3px solid #6a901b;
transition: all 0.5s ease;
}
#nav li a:hover {
transition: all 0.5s ease;
color: #fff;
padding-bottom: 5px;
}
How about something like this? FIDDLE.
Just keep the background fixed, add a border at the bottom, and make the height of the anchor smaller.
Relevant CSS
#nav li {
float: left;
height: 40px;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
height: 20px;
transition: height 0.5s;
}
#nav li a:hover {
height: 10px;
border-bottom: 3px solid red;
}
It looks like the example site uses flexNav, a jQuery plugin.
http://jasonweaver.name/lab/flexiblenavigation/
Here's a quick-fix solution. I added a transition to <li> padding to compensate for the added border.
http://jsfiddle.net/Lxxqz3pL/1/
I've made a css dropdown menu and I want each dropdown option to have a blue background when it is hovered on. However when I try this the background for the option will only be blue when the top half of it is hovered on. Here it is on jsfiddle. If you hover your mouse on the "products" option and then put the mouse under "plates" but above the gray horizontal line the background won't be blue. Can anybody help me? Thank you.
http://jsfiddle.net/hDWuJ/1/
HTML (Note this is a segment of my web page and so it does not have valid syntax)
<h1 id="title">Sample Text</h1>
<div id="HorzLineDiv"><hr></div>
<div id="MenuCenter">
<nav id="Menu" class="MenuBar">
<ul id="drop-nav">
<li>Home</li>
<li>Products <span id="arrowDown">▼</span>
<ul>
<li>Children's Stuff</li>
<li>Plates</li>
<li>Top Sellers</li>
</ul>
</li>
<li>Services <span id="arrowDown">▼</span>
<ul>
<li>Wash 'n' Fold</li>
<li>Blanket Making</li>
<li>Wedding Dress</li>
<li>Custom</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS
body
{
background-color: #dfdfdf;
}
#title
{
text-align: center;
color: #07a8ca;
font-size:60pt;
margin: 0px;
padding: 0px;
text-shadow: 2px 2px 0px #888888;
}
h1
{
margin: 0px;
padding: 0px;
}
hr
{
height: 3px;
color: #07a8ca;
background: #07a8ca;
font-size: 0;
border: 0;
}
#HorzLineDiv
{
width: 95%;
margin: 2% 0% 3% 0%;
margin-left: auto ;
margin-right: auto ;
}
#Menu
{
width:100%;
}
#drop-nav
{
margin: 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
ul li
{
display: block;
position: relative;
float: left;
display: inline;
padding: 12px 50px 8px 50px;
margin: 0px 5px 0px 5px;
border-left: 3px solid #07a8ca;
}
ul li:first-child
{
border-left: 0px;
}
li ul
{
display: none;
}
ul li a
{
display: block;
text-transform: uppercase;
text-decoration: none;
text-align:center;
color: #000;
font: 25px/1.1em "Kelly Slab","serif";
transition: color 0.4s ease 0s;
-moz-transition: color 0.4s ease 0s; /* Firefox 4 */
-webkit-transition: color 0.4s ease 0s; /* Safari and Chrome */
-o-transition: color 0.4s ease 0s; /* Opera */
}
ul li a:hover
{
color: #FF4D4D;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
}
li:hover a
{
margin:0;
}
li:hover li a:hover
{
background: #21e8fa;
}
#drop-nav li ul li
{
border-top: 0px;
border-left: 0px;
}
#drop-nav ul li a
{
border-top: 3px solid #888;
padding: 13px 0px 13px 0px;
margin: -10px -8px;
text-align:center;
text-transform: none;
position:relative;
top: 13px;
color: #000;
}
#drop-nav ul
{
width:100%;
position:absolute;
right:-5px;
}
a
{
margin:0px;
padding:0px;
}
#arrowDown
{
font-size: 10pt;
vertical-align:text-bottom
}
The main issue is in your margins and padding, but this can be worked around by changing your ul li to display: block; instead of display: inline;.
Of course, this isn't a direct fix to the issue, and there still is an area at the bottom that doesn't work on hover, but it is much smaller than before. The proper way to go about fixing this is fixing your margins and padding.
Demo
UPDATE
Reading deeper into your code, I found the actual problem. It is not in margins or padding as I originally thought, but is a top property of 13px defined in #drop-nav ul li a. That top of 13px was creating a blank, inactive space in your list.
Get rid of that piece and it is working fine: DEMO
I have 2 issues I wanted to resolve in a CSS menu I'm coding but I find it out of my reach to handle them. Before I put the code here let me describe my 2 issues:
1) I'd like to have the all li area clickable instead of only the text..
2) I think the image and text is not correctly alingned vertically and wanted to fix that also.
Also: You can see the code I have in action at www.nfrases.com/modelo.php
HTML:
<nav>
<div class="drop-menu">
<span class="plus">+</span><span class="droptexto">Navegação</span>
<ul class="sub-menu">
<li><img src="/images/icon_info.png" alt="rss"> Acerca</li>
<li><img src="/images/icon_email.png" alt="rss"> Contactos</li>
</ul>
</div>
</nav>
CSS:
nav { width: 640px; float: right; }
.drop-menu { font-family: Arial, Helvetica, sans-serif; display: block; position: relative; margin: 0 auto; text-align: left; padding: 10px 10px; font-size: 22px; height: 30px; max-height: 30px; width: 120px; cursor: pointer; border-left: 1px solid #e7e4d4; border-right: 1px solid #e7e4d4; background: url("../images/bg_header.png") repeat scroll right top transparent; float: right; }
.drop-menu a, .drop-menu a:visited { color: #464530; text-decoration: none; }
.drop-menu a:hover { color:#ff5400; }
.drop-menu span.droptexto { padding-left:10px; font-size: 20px; color: #ff5400; font-family: 'Leckerli One', cursive; }
.plus { display: inline-block; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; color: #ff5400; }
.drop-menu:hover .plus { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); }
.drop-menu:hover { border-left: 1px solid #e7e4d4; border-right: 1px solid #e7e4d4; }
.drop-menu:hover .sub-menu { display: inline-block; }
.sub-menu { display: none; width: 120px; background: #fff; padding: 10px 10px; margin-left: -11px; margin-top: 12px; border: 1px solid #e7e4d4; -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2); }
.sub-menu li { list-style-type: none; display: block; border: 1px; border-color: #fff; border-style: dotted; border-bottom: 1px dotted #eaeaea; font-size: 19px; height: 24px; padding: 8px 0; font-size: 12px; }
.sub-menu li img { margin-right: .5em; margin-left: .5em; }
.sub-menu li:hover { border: 1px; border-color: #ff5400; border-style: dotted; }
as suggested earlier to make complete link clickable use display:block and define width&height or padding
.sub-menu li a {display:block; padding: 10px;}
to make the image and text aligned to center, the best approach is to put the image in background either li's or 'a' tag's. Dont forget the padding-left shd be greater than the width of the image.
.sub-menu li a.img1 { background-image:url(images/imagename.jpg); }
.sub-menu li a { background-position:center left; background-repeat: no-repeat; height: 20px; line-height: 20px; display: block; padding-left: 20px; }
Even if u dont want to put the image in background then try this. It may work. Set the height as per the height of the image, or use padding.
.sub-menu li a { height: 20px; line-height:20px; display: block;}
Hope this helps !
1)
.drop-menu a {
display:block;
}
2) Add the left image as background image of <li> then you can center the image and text horizontally.
Something like this will do the job: http://jsfiddle.net/YGHNu/
To make a full link set a to "display: block;", then set height and margin. To center image use "vertical-align: middle", and then move it a little higher with margin-top.