I have created CSS menu bar for my webpage. But Left side border is not displaying when some one move mouse on "My Presentations" link. Currently "My Favorite" link is selected. Please notice Left side gray border is not displaying on "My Favorite" link. But when u move mouse on "Friend's Favorite" link then right side border in displaying on "My Favorite" link. I need to display left side border to.
Here is the link:-
jsFiddle Link
<ul class="menu" style="margin-top:20px;">
<li>Home</li>
<li>My Presentations</li>
<li class="current">My Favorite</li>
<li>Friend's Favorite</li>
<li>Most Viewed</li>
<li>Sync account</li>
</ul>
/* NAVBAR CSS START HERE */
.menu,.menu ul,.menu li,.menu a {margin: 0;padding: 0;border: none;outline: none;}
.menu {height: 30px;width: 759px;background: #3B5998;border:1px solid #e1e1e1; border-top-left-radius:5px;-moz-border-radius-topleft:5px; border-top-right-radius:5px;-moz-border-radius-topright:5px}
.menu li {position: relative;list-style: none;float: left;display: block;height: 30px;}
.menu ul { display: none;}
.menu li a{display: block;padding: 0 14px;line-height: 30px;text-decoration: none;font-family: Tahoma;font-weight: bold;font-size: 11px;color: #f9f9f9;border-left:1px solid #8698C0;}
.menu li:hover > a{ color: #9a9a9a; background:#fff; border-left:1px solid #ccc;}
.menu li a.first{border-left:0px; background:#ffvv00;}
.menu li.current a{border:0px; height:31px;color: #9a9a9a; background:#fff; margin-top:-3px; padding-top:3px; padding-bottom:4px;border-top-left-radius:5px;-moz-border-radius-topleft:5px; border-top-right-radius:5px;-moz-border-radius-topright:5px;}
.menu li:first-child a:hover{border-top-left-radius:5px;-moz-border-radius-topleft:5px; border-right:1px #ccc solid; margin-right:-1px;}
.menu li:last-child a{border-right: none; }
Did many changes to the code, it better to take look at the demo
New Demo
Note :
I am not sure, why you made your active element more taller than other elements, and they have some rounded edge. It looks odd
Related
I'm styling my navigation menu but I'm having some trouble. On mobile mode, I have home selected, and gallery is hovered, as per the image below.
However, I want there to be a 1 pixel border running between them. I have the following CSS:
/* Small Devices, Tablets */
#media only screen and (max-width: 766px) {
.collapsing, .in {background-color: #transparent; border: 1px; border-color: #7A292A;}
.collapsing .in ul li a {color: #DEE0A3!important;}
.collapsing ul li a:hover, .in ul li a:hover {color: #9D343D!important; border: 1px; border-color: #7A292A;}
.collapsing ul li a:focus, .in ul li a:focus {background-color: #000 !important;}
}
But it's not working. Any ideas? I think I want a 1px border at the bottom of the current active navigation link, which I thought was the focus link.
In your HTML markup apply id on the active li and in css media rules target the li#id and apply border-bottom: 1px solid #7A292A;
HTML:
<ul>
<li id="active">Home</li>
<li>Gallery</li>
</ul>
CSS:
li#active{ border-bottom: 1px solid #7A292A;}
Note: Make sure you are viewing at resolution according to your css media rule.
Add this and see if that works :
.collapsing ul li a:active, .in ul li a:active {border-bottom: 1px solid #000 !important;}
I have this code:
<style>
.menypic:hover { transform:scale(1.1,1.1)}
.menu ul {list-style: none;padding: 0px;margin: 0px;}
ul.menu li {display: block;position: relative;float:left;border:0px solid #000;list-style-type: none;}
.menu li ul {display: none;border:0px;}
.menu ul li a {display: block;background: #fff;padding: 5px 5px 5px 5px;text-decoration: none;
white-space: nowrap;color: #000;border:0px; font-family: "Calibri", Times, serif;font-size: 14px;}
.menu ul li a:hover {background: #fff;}
.menu li:hover ul {display: block; position: absolute;border-bottom: solid thin #0066ff;border-left: solid thin #0066ff;border-right: solid thin #0066ff;background: #0066ff}
.menu li:hover li {float: none;}
.menu li:hover a {background: #ffffff;border:0px solid #000;}
.menu li:hover li a:hover {background: #0066ff;border:0px solid #000;color: #fff;text-decoration: none;}
#drop-nav li ul li {border-top: 0px;}
</style>
<ul>
<li class="menu">
<img src="1-4.png" class="menypic">
<ul class="menu">
<li class="menu"> Nyheter </li>
<li class="menu"> 20 1-4 </li>
</ul>
</li>
</ul>
And it works brillantly. When I hover the picture it transform to little bigger, and the new menu comes down. Works perfect. But when I hover the menu, the picture goes back to its old size. Is it possible to hold the transformation as long as I am in the menu?
You can set style for other child elements of (for e.g) menu element, while you are "on" menu element with your mouse cursor.
For e.g you can add:
.menu:hover .menypic { transform:scale(1.1,1.1);}
..and all your elements with .menypic class in .menu will be scaled while element with .menu class is in :hover state.
Here is a working fiddle: https://jsfiddle.net/eukjxuqc/3/
EDIT/UPDATE: After reading comments, I hope this is what you need.
Basically, I think this is what you need (this is not from your code, I created new example just to make things easier to understand):
ul.submenu li:hover ul.menu li, ul.menu li:hover {transform:scale(1.1,1.1);}
Also, new fiddle link: https://jsfiddle.net/Munja/eukjxuqc/5/
I get the feeling that these are really simple problems, however I'm new to coding and can't work out how to fix them. Any help would be greatly appreciated.
Firstly, the hyperlink text is currently the only clickable part of the dropdown menu. I want to be able to click the whole section of the menu that the text sits in, i.e the individual parts separated by the 1px borders. I'd also like these sections to change color when the cursor hovers over them, but I'm not sure which part of the css to change if I want to achieve this.
Secondly, the padding creating the space between my main menu links is being included in the link hover function. Is there a way of spacing out the links that doesn't cause the subpages to drop down when I hover over the white space to the left of them? (This seems like the opposite of my first problem)
Finally, part of the css I've written makes any of the parent menu links that have been clicked stay highlighted purple while the viewer is on that page. This was intentional, however now that I have child pages in the dropdown menu, they all stay that color too when the parent page is clicked. Is there a way of fixing this? it would be ideal if both the parent link and the specific child link stayed highlighted purple whilst the viewer was on a that particular child page.
The website link is www.lucieaverill.co.uk
Here is the code :
HTML:
<nav class="site-nav">
<?php $args = array('theme_location' => 'primary'); ?>
<?php wp_nav_menu(); ?>
</nav>
CSS:
/* header navigation menu */
.header nav ul{
display:block;
float:right;
width:auto;
margin-top:15px;
padding: 0;
background-color:#ffffff;
list-style:none;
}
.header nav ul li {
float:left;
padding-left:50px;
padding-bottom:20px;
}
.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}
/* dropdown menu */
.header nav ul ul {
position:absolute;
left: -999em;
}
.header ul li:hover ul {
left:auto;
width: 200px;
}
.header ul li ul li {
float:none;
padding-left:10px;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #ededed;
}
.header ul li ul li a {
font-size:11px;}
/* end dropdown menu */
/* end header navigation menu */
UPDATE! ------------------------------
I think I've made some progress based on what various people have been saying about a tags. I've managed to reach the point where the hover effect changes the a tag's color, however the padding is a little off, and I can't work out why. I've tried setting the padding-right value to "auto", as I don't think it can have a specific value as each link varies in length.
Obviously, I want the padding to extend to the very end of the menu at the right hand side, but I can't make this work.
There also seems to be some odd spacing between the color of each link, and at the very bottom of the menu.
I'm surprised to see that the transition between colors is smooth and gradual.. I don't think I have any css that tells it to act like this.. is there a way of making it more instant?
The web link again, is www.lucieaverill.co.uk
/* dropdown menu */
.header nav ul ul {
position:absolute;
left: -999em;
}
.header ul li:hover ul {
left:auto;
width: 200px;
}
.header ul li ul li {
margin-left:0px;
float:none;
}
.header ul li ul li a {
background-color:#FF3F55;
padding-left:10px;
padding-right:auto;
padding-top: 12px;
padding-bottom: 12px;
font-size:11px;
border-bottom: 1px solid #ededed;
}
.header ul li ul li:hover a {
background-color:#ededed; }
/* end dropdown menu */
See the fiddle:
Remove the padding of li and add the required padding to a tag.
the clickable problem will be fixed.
/* header navigation menu */
.header nav ul{
display:block;
float:right;
width:auto;
margin-top:15px;
padding: 0;
background-color:#ffffff;
list-style:none;
}
.header nav ul li {
float:left;
padding:0px;
}
.header nav ul li a{
padding:20px 25px;
}
.header nav ul li a:hover {
color:white;
background:black;
}
.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}
/* dropdown menu */
.header nav ul ul {
position:absolute;
left: -999em;
}
.header ul li:hover ul {
left:auto;
width: 200px;
}
.header ul li ul li {
float:none;
padding-left:10px;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #ededed;
}
.header ul li ul li a {
font-size:11px;}
/* end dropdown menu */
/* end header navigation menu */
<div class="header">
<nav class="site-nav">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>submenu
<ul>
<li>submenu1</li>
<li>submenu2</li>
</ul>
</li>
</ul>
</nav>
</div>
I'm creating a horizontal navigation bar and would like to stylize it so that a thin line will appear right above the bar (please see example).
Nav Bar Example
As you can see there is a thin, gold line just above the red navigation bar. I would like to get a thin, black line just above my orange navigation bar.
My code looks like this:
(CSS)
nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-align:center;background-color:#c0872e}
nav li {display:inline-block;background-color:#c0872e;}
nav a {line-height:35px; color:white; padding:0 30px; font-size:22px; font-family:WindsorDemi.fog Cn; background-color:#c0872e;}
nav a:hover {text-decoration:none}
(HTML)
<div>
<ul>
<li>Home</li>
<li>Products</li>
</ul>
</div>
Please let me know how I can achieve this desired effect. Thank you!
You could accomplish this using a border:
nav ul {
border-top: 2px solid #000; /* Added */
list-style-type:none;
margin:0;
padding:0;
text-align:center;
background-color:#c0872e
}
Here's a JSFiddle to show you how it looks.
Hope this helps! Let me know if you have any questions.
Just do this (add border-top)
CSS
nav ul {
list-style-type:none;
margin:0;padding:0;
text-align:center;
background-color:#c0872e;
border-top: solid 1px #000; // Add this (adjust your needs)
}
First, we need to change your surrounding div to the nav element.
<nav>
<ul>
<li>Home</li>
<li>Products</li>
</ul>
</nav>
Then just add a border-top to the nav css.
nav {width:100%;display:block;border-top:4px solid #000;}
nav ul {list-style-type:none;margin:0;padding:0;text-align:center;background-color:#c0872e}
nav li {display:inline-block;background-color:#c0872e;}
nav a {line-height:35px; color:white; padding:0 30px; font-size:22px; font-family:WindsorDemi.fog Cn; background-color:#c0872e;}
nav a:hover {text-decoration:none}
I created a dropdown menu through CSS but weirdly all the dropdown menus are aligned to left. I am hoping that all the dropdowns would appear and drop under their parent menu.
The HTML is as follows:-
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages" class="ng-scope selected">
Introduction
<ul>
<!-- ngRepeat: smenu in data.subMenu[$index].list --><li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list" class="ng-scope">
Profile
</li><li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list" class="ng-scope">
Background
</li><li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list" class="ng-scope">
What is KAM
</li>
</ul>
</li>
...
</div>
Following is the CSS:-
#menu {
/*border-bottom:4px seagreen solid;*/
background-color: #2d394d;
list-style:none;
}
#menu ul {
list-style: none;
}
#menu ul li {
display: inline-block;
float: none;
/*width: 20%;*/
}
#menu ul li a{
font-size: 10pt;
padding:12px 24px 12px 24px;
/*border-right:1px white solid;*/
display:block;
text-decoration: none;
text-align: center;
color:#fff;
text-transform: uppercase;
}
#menu ul li a:hover{
}
#menu ul li.selected a {
background-color: #1b86c2;
color:#fff;
}
/* DropDown Menus */
#menu ul ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#menu ul li ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
display: block;
}
#nav ul ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#menu li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#menu li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#1b86c2;
text-decoration:underline;
}
#menu li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#menu li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;
}
You can see the Image showing it here (where the picture shows the drop down for "Cases", it should be under the Cases, but it is shifted to left. "Introduction" sub-menu also shows at the same place):-
It is because of left:0 positioning and parent li's position as being static by default. Yo can fix it by marking it relative so that child ul's left:0 will be relative to the parent li.
#menu ul li {
display: inline-block;
float: none;
/*width: 20%;*/
position:relative; /*Add this*/
}
#menu li:hover ul{ /* Display the dropdown on hover */
/* Bring back on-screen when needed */
left:0;
padding:0; /*Add this if you are not using any reset*/
}
Fiddle
try adding #menu ul li {position: relative;}
Correction:
After looking closer my last answer wasn't quite right. This might not be the best way to fix it. But its a way (or gets it in the ball park anyways).
In your CSS do the following:
#menu {
/*border-bottom:4px seagreen solid;*/
background-color: #2d394d;
height:40px;
list-style:none;
}
#menu ul li ul{
position:relative;
}
Here is a demo:
http://jsfiddle.net/2mtt8/1/
It looks like each of your drop-downs is position absolutely at 0px:
left:0; /* Bring back on-screen when needed */
I suggest positioning each relatively to its parent.
You might consider using display:none to hide drop-downs, rather than positioning them off-screen.