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.
Related
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;
}
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 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;
}
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%.