I have a list which I have used as a menu. When I hover over them I create a border around them but then when I do this, they move a little to the left! How can I prevent them from doing this?
Fiddle.
CSS:
header {
background-color: #eee;
height: 45px;
box-shadow: 0px 2px 3px 1px #bbb;
}
#welcome_area {
float: left;
margin-left: 5%;
}
#menu {
float: right;
margin-right: 5%;
}
#menu nav ul li {
display: inline;
padding: 5px;
}
#menu nav ul li a {
color: black;
text-decoration: none;
padding: 2px;
}
#menu nav ul li a:hover {
border: 1px solid black;
border-radius: 2px;
}
.userWidget {
position: relative;
display: inline-block;
width: 300px;
height: 50px;
overflow: visible;
z-index: 1;
}
.userWidget:hover {
z-index: 2;
}
.user {
position: absolute;
width: 300px;
height: 50px;
margin-bottom: 5px;
background: #fff;
transition: width 0.3s, height 0.3s;
}
.user:hover {
width: 350px;
height: 200px;
background: #eee;
transition: width 0.3s ease 0.5s, height 0.3s ease 0.5s;
}
Add an invisible border with 1px width to non-hovered links:
#menu nav ul li a {
...
border: 1px solid transparent;
}
DEMO
Using less code, you can achieve the same effect.
Use outline to achieve what you need:
#menu nav ul li a:hover {
outline: 1px solid black;
border-radius: 2px;
}
Related
I am almost done w/ my menu here. However I have two issues.
I can't add a 1px solid border #fff on the last item of the list.
I need to remove the vertical scrollbar on the left.
Here's my CSS:
#nav li ul {
opacity: 0;
height: 0px;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #e74c3c;
color: #fff;
display: block;
list-style: disc;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav .fa { margin: 0px 17px 0px 0px; }
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo{
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
#nav li span:first-child {
margin-left: 32px;
}
asdasdasdasdasdasdasdassa
Well, first remove this:
#nav li:not(:last-child) {
border-bottom: 1px solid #fff;
}
for add border to all li even last one:
#nav li {
border-bottom: 1px solid #fff;
}
for removing scroll do this:
JS:
$('body, html').toggleClass('OverflowHidden');
CSS:
.OverflowHidden {
overflow: auto;
}
and for removing double border use this:
#nav li ul li:last-child {
border-bottom: none!important;
}
jsFiddle
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/
What I am doing:
On hover of a button I am addding a border-bottom of 5px.
JS FIDDLE: http://jsfiddle.net/mUCNB/
Problem:
The problem is the border bottom extends 1px too far on both the left and right side.
Question:
Does anyone know how to fix this?
Relevant Code:
#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
border-right: 1px solid #ffffff;
}
#main-nav li a:nth-child(3) {
width: 225px;
}
#main-nav li a:last-child {
width: 224px;
border-left: 1px solid #ffffff;
}
#main-nav a:hover {
height: 30px;
border-bottom: 5px solid #0BC6F5;
}
Since CSS borders 'miter' at the edges, you're going to notice that phenomenon. To work around this, I've created rules to highlight the li BEHIND the a that is on hover. This creates the effect that you are getting a clean border at the bottom. You can retain those white separators between your elements too then.
Forked Fiddle
CSS
* {
margin: 0px;
padding: 0px;
outline: none;
}
#header {
background-color: #00a0c8;
min-height: 118px;
}
#headerContent {
width: 980px;
min-height: 118px;
margin: 0 auto;
background-color: #00a0c8;
}
nav {
width: 980px;
margin: 0 auto;
}
nav li {
border-left: 1px solid #fff; /* Added border to nav li */
display: block;
float: left;
height: 50px; /* Give it height */
}
#main-nav li:hover {
background: #0BC6F5; /* Give background color to li on hover */
}
nav li:first-child {
border-left: none;
}
#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
}
#main-nav li a:nth-child(3) {
width: 225px;
}
#main-nav li a:last-child {
width: 224px;
}
#main-nav li a:hover {
height: 30px;
}
Hope that helps.
you can solve this issue by removing the border-left and border-right styles from the following:
updated css:
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
}
#main-nav li a:last-child {
width: 224px;
}
updated fiddle
Also a neat trick is to just use box-shadow instead, to apply the conflicting border:
#main-nav a:hover {
height: 30px;
box-shadow:0 5px 0 -1px #0BC6F5;
}
This works, if you just replace your current hover selector!
if you want to try it first, here's another fiddle:
http://jsfiddle.net/4zzMA/
I'm trying to put an a:hover over an menu that i created. If you could help me I really appreciate it! What im trying to achieve is to get the black in the whole bar. If you know what I mean.
Here is the menu: (The black is hover)
So here is my CSS for the menu:
#navigation {
padding: 5px;
height: 1em;
width: auto;
text-align: center;
font-family: Verdana;
font-size: 12px;
text-transform: uppercase;
margin-top: -5px;
}
#navigation ul {
background-color: #fff;
width: 1000px;
margin-left: -5px;
}
#navigation li {
float: left;
list-style: none;
width: 100px;
background-color: #fff;
padding: 10px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.235), 0px 0px 5px rgba(0, 0, 0, 0.047);
}
#navigation li ul {
padding: 5px;
display: none;
width: em;
background-color: #fff;
}
#navigation li a:hover {
background-color: #000;
padding:10px;
width: 300px;
color: #fff;
position:absolute;
}
#navigation a {
color: #000;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#navigation a:link {
color: #000;
}
#navigation a:hover {
color: #fff;
background-color: #000;
}
#navigation a:visited {
color: #000;
}
So if you need more information about this, just visit my Website where you can see the issue yourself. http://tomaswebdesign.com
You've got two options, the first is the simplest, simply add the :hover to the li itself:
li:hover,
a:hover {
color: #fff;
background-color: #000;
}
JS Fiddle demo. For the above solution, I'd also suggest (as is included in the linked-demo) that you set color: inherit on the a element (not under a:hover)
The second is to style the a as a block element:
a {
display: block; /* to fill the available horizontal space */
height: 100%; /* to fill the available vertical space */
}
This does require that you remove the padding from the li element though, as that's what's 'forcing' the background-color away from the edge of the element, so:
li {
padding: 0;
}
li a {
padding: 10px; /* so that the padding is preserved, albeit
on the a element instead */
display: block;
height: 100%;
}
JS Fiddle demo.
Try this
#navigation li {
display:block;
float: left;
list-style: none;
width: 100px;
background-color: #fff;
padding: 10px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.235), 0px 0px 5px rgba(0, 0, 0, 0.047);
}
Or you can set anchor width and height to 100%.
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.