Basically I want the hover-look of a link stay active when you're on that site. I hope I'm explaining this right. There's supposed to be a background behind the link when you're visiting that specific page.
Here's the code for the html:
<div class="menudiv">
<div id="menu">
<ul id="menu">
<li><span>Hem</span></li>
<li><span>Om oss</span></li>
<li><span>Tjänster</span></li>
<li><span>Referenser</span></li>
<li><span> Kontakt</span></li>
</ul>
<div class="clr"></div>
</div>
</div>
And here's the css:
#menu { float:right; padding:23px 0 0 0; margin:0; width:420px; height:35px;}
#menu ul { text-align:right; padding:0; margin:0; list-style:none; border:0; height:35px;}
#menu ul li { float:left; margin:0; padding:0 5px; border:0; height:35px;}
#menu ul li a { float:left; margin:0; padding:10px 0; color:#5c8783; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
#menu ul li a span { padding:10px 13px; background:none;}
#menu ul li a:hover { background:url(images/r_menu.gif) right no-repeat;}
#menu ul li a:hover span { background:url(images/l_menu.gif) left no-repeat;}
#menu ul li a:active { background:url(images/r_menu.gif) right no-repeat;}
#menu ul li a:active span{ background:url(images/l_menu.gif) left no-repeat;}
Add a CSS class for the that link (eg, <a class="CurrentPage">), then apply the selector to that class (eg, #menu ul li a:active, a.CurrentPage)
As much I know the hover property should put last in CSS (below the active and others) in order to work properly.
you are giving same id :
<div id="menu">
<ul id="menu">
which is wrong
you should make ids different.
What you basically need is to add a css class to the a tag in your menu.
example:
<li><span>Hem</span></li>
add styling to your currenPage class as per the designs you want for that menu item
now, your page should be dynamic for you to be able to set the currenPage css class to the current menu item where the user is currently viewing
example:
<li><a href="?p=start" class="<?php if(/**check if the user is in this link/menu item**/) echo "currentPage"; ?>" ><span>Hem</span></a></li>
Related
I'm creating my first WordPress theme. It's a very simple one for a friend's website, who is a music producer. I'm creating the navigation menu. One of the items on the menu is listen. It's not an actual link. You hover over it and a submenu should appear. So I made Listen a custom link.
The problem is that the submenu doesn't appear. The Submenu has its own class. But I don't think WordPress is reading the CSS
Here is the CSS:
ul.sub-menu {
display: none;
position: absolute;
padding: 0px;
margin-left: -20px;
}
ul.sub-menu li {
display: block;
text-align: left;
background-color: grey;
}
ul.sub-menu li:hover {
background-color: #dae0e6;
}
ul.main_nav li:hover ul.sub-menu {
display: block;
}
Here is the HTML and php code in the header.php:
<nav>
<?php
$defaults = array(
'container' => false,
'theme_location' => 'primary-menu',
'menu_class' => 'main_nav'
);
wp_nav_menu( $defaults );
?>
<!--
<ul class="main_nav">
<li>
Home
</li>
<li>
Bio
</li>
<li>
<a>Listen</a>
<ul class="sub-menu">
<li>Originals</li>
<li>TV/Film</li>
</ul>
</li>
<li>Credits</li>
<li>Contact</li>
</ul>
-->
</nav>
Here is my approach:
I changed css so its shows menu sub menu with CSS.
JsFiddle Demo
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul ul li
{
float:none;
width:200px
}
nav ul ul a
{
line-height:120%;
padding:10px 15px
}
nav ul ul ul
{
top:0;
left:100%
}
nav ul li:hover > ul
{
display:block
}
<nav>
<ul class="main_nav">
<li>
Home
</li>
<li>
Bio
</li>
<li>
<a>Listen</a>
<ul class="sub-menu">
<li>Originals</li>
<li>TV/Film</li>
</ul>
</li>
<li>Credits</li>
<li>Contact</li>
</ul>
</nav>
In example above your menu is commented out. Also parent of ul.sub-menu should be positioned relative.
since you are new ... I think you should start by get general idea about the sub menu and style them in WordPress .
this Tut will help you
http://wproots.com/how-to-style-wordpress-menus-dropdowns/
also I will suggest other option for you .
start form other theme like wordpress deafult theme and edit it
start form starter theme like http://bootstrapwp.rachelbaker.me/
start from template
its hard to build theme from scratch if you are new ... step by step
please assign width to ul like
ul.sub-menu {
display: none;
}
and plaece
ul.main_nav li:hover ul.sub-menu {
display: block;
position: absolute;
padding: 0px;
margin-left: -20px;
top:0;
left:0;
width:800px;
}
just after it
I am just a beginner to HTML, CSS, PHP, javaScript.
My drop down menus to the navigation bar is not working.
When I keep the mouse over the links in navigation bar, no drop down menu is apeearing.
Need a help from some one.
CODE
<head>
#menu {
width:1060px;
margin:auto;
padding:0px 0px 0px 0px;
position:relative;
}
#menu ul {
height:25px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
background-color:#8AD9FF;
border-radius:18px;
margin-top:10px;
margin-bottom:5px;
list-style:none;
}
#menu ul li{
border-style:solid;
border-width:2px;
border-bottom:none;
border-top:none;
border-color:#0000FF;
display:inline-block;
text-decoration:none;
color:#FF0000;
padding-bottom:0px;
padding-top:0px;
margin-right:-8px;
}
#menu ul li a {
padding-left:25px;
padding-right:25px
}
#menu ul li a:link{
color:#3366CC;
text-decoration:none;
}
#menu ul li a:visited{
color:#3366CC;
text-decoration:none;
}
#menu ul li a:hover{
background-color:#3399FF;
text-decoration:underline;
}
#menu ul ul {
display:none;
width:125px;
}
#menu ul li a:hover > ul {
margin:0px;
padding:0px;
}
#menu ul li a:hover > ul li {
float:none;
display:block;
}
#menu ul li a:hover > ul li a {
color:#3366CC;
min-width:150px;
}
#menu ul li a:hover > ul li a:hover {
background-color:#3399FF;
text-decoration:underline;
}
#menu ul li {position:relative;}
#menu ul li ul {
position:absolute;
top:30px;
left:0px;
}
</head>
<body>
<div id="menu">
<ul>
<li>Home</li>
<li>College
<ul>
<li>Faculties & Departments</li>
<li>Centres</li>
<li>College Facts</li>
<li>Awards</li>
</ul>
</li>
<li>Education
<ul>
<li>Pahrmacy Law Exam Review Course</li>
<li>Doctor Of Pharm Degree (Pharm. D.)</li>
<li>Graduate Programs</li>
<li>Online MS Programs</li>
</ul>
</li>
<li>Research
<ul>
<li>Medicina lChemistry</li>
<li>Doctor Of Pharm Degree (Pharm. D.)</li>
<li>Graduate Programs</li>
<li>Online MS Programs</li>
</ul>
</li>
<li>Faculty & Staff
<ul>
<li>Faculty Directory</li>
<li>Staff Dierctory</li>
</ul>
</li>
<li>News</li>
</ul>
</div>
</body>
Try something like this :
#menu ul li:hover > ul{
display: block;
}
Try to comment those line here :
#menu ul li ul {
position:absolute;
/*top:30px;*/
left:0px;
}
and :
#menu ul {
height:25px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
background-color:#8AD9FF;
border-radius:18px;
/*margin-top:10px;*/
margin-bottom:5px;
list-style:none;
}
Look at the following code
#menu ul li a:hover > ul {
float:none;
display:block;
}
The above code will display the child levels when they hover the anchor element. But in your code it is a sibling element not child element. So use next sibling element syntax like below.
#menu ul li a:hover + ul {
float:none;
display:block;
}
But after this you have to do so many things to works your menu better way. This will fix the hover display issue only.
DEMO
You can do this without JS or PHP. You have an extra a tag in most of your CSS. You shouldn't show the nested ul when someone hovers over the anchor, you should show it when someone hovers over the list item:
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: block;
}
Likewise, the above style hides the entire nested ul instead of each li, which is cumbersome. Show and hide only one thing: the containing element.
I would recommend some more organization to keep things straight.
instead of writing ul ul{}, it may help you to write ul li ul{}, at least until this code becomes natural to you.
You also have a lot of extra pseudo elements in there. For instance:
#menu ul li a:hover > ul li a:hover {
background-color:#3399FF;
text-decoration:underline;
}
doesn't need the pseudo element :hover on the first a tag (which would be on the li tag anyway). Since you can only see the second a tag on hover, it can have this style all of the time:
#menu ul li ul li a:hover {
background-color:#3399FF;
text-decoration:underline;
}
I have a website with a css drop menu, which works fine on chrome and firefox, but in IE the drop menu doesn't display.... it's almost like it doesn't exist at all...
I've tried multiple times to copy some code or menus from other sites i have that do work in IE, but without success.
Here's the html...
<ul id="menu">
<li>INTRO |</li>
<li>HOME |</li>
<li>ACCOMMODATION & RATES |</li>
<li>INFO |</li>
<li>ACTIVITIES |
<ul class="sub-menu">
<li>GARDEN ROUTE ACTIVITIES</li>
</ul>
</li>
<li>GOLF |</li>
<li>NEWS |</li>
<li>CONTACT US |</li>
<li>DIRECTIONS |</li>
<li>GALLERY</li>
</ul>
the CSS
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
padding:0px 0 0px 0;
margin: 0px;
/*background-color:#9A844C;*/
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
display:inline;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #573A2F;
padding: 0px;
display:inline-block;
font-size:10px;
}
ul#menu li a:hover {
text-decoration: none;
color: #000;
padding: 0px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
padding-bottom:5px;
z-index:100001;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 20px;
left: 0;
width: 200px;
background-color:#E2D9C6;
z-index:100001;
}
ul#menu li:hover ul.sub-menu {
display:block;
z-index:100001;
}
ul#menu li ul.sub-menu:hover {
display:block;
color: #573A2F;
z-index:100001;
}
Any help would be greatly appreciated...
I have checked with your code and it is working in my system. I have checked in IE7,8 and 9.
Another suggestion just change below css and check again:
I have just changed from "ul#menu li ul.sub-menu:hover" to "ul#menu li:hover ul.sub-menu"
ul#menu li:hover ul.sub-menu {
display:block;
color: #573A2F;
z-index:100001;
}
As others have stated, your code works with IE7, IE8 and IE9.
If the issue is really with IE6, I am not going to solve your current problem, because of the following line:
It is not worth it
And with this i don't mean that YOUR WORK is not worth it, but that nobody should still develop for IE6. It's a 10 years old browser, which should be put to sleep as soon as possible. And it's not just my opinion, but Microsoft's! see HERE and notice the Microsoft copyright at page footer.
Also, see HERE for browser usage statistics: IE6 is used by just 0.6% of internet users. Is your time worth it?
I've a css menu, but this getting problem when I add more menu items.
What should I do to create a menu for unlimited menu items ?
my css
<style type="text/css">
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
#nav a:link, #nav a:active, #nav a:visited{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
}
#nav a:hover{
background-color:#fff;
color:#333;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:12em;
top:1.5em;
display:none;
}
#nav li ul a{
width:12em;
float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
</style>
my sample menu for static items
<ul id="nav">
<li>1 HTML</li>
<li>2 CSS
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download
<!-- If I add this ul here then it doesn't follow the current css.
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
-->
</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
<li>3 Javascript
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
</ul>
(suppose,I want to show product menu where product categories will come from database. so its also required to use some php,mysql.just show me how should I design the css menu for the unknown number of category and subcategory)
-Thanks.
I'm working on a website using PHP, HTML and CSS. Currently in my navigation bar, I've set the background color to be grey. When the user hovers over the navigation bar, each link gets a blue background, however when I click the link, the background color goes back to grey. How do I make the hover color blue stay if that particular link is active.
This is the code for my navigation bar.
<tr>
<td width="800" height="54">
<div id="nav" >
<ax><b><font face="Arial" ><a style="text-decoration: none; color:#303030" href="index.php" >HOME</a></font></b></ax>
<bx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="edituser.php?own=y">IT</a></font></b></bx>
<cx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="newsevents.php">HUMAN RESOURCE</a></font></b></cx>
<dx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="industries.php">PROCUREMENT</a></font></b></dx>
<ex><b><font face="arial" size="1"><a style="text-decoration: none; color:#303030" href="http://www.csmphilippines.com/aboutus.html">FINANCE</a></font></b></ex>
<fx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="hact.php">HACT</a></font></b></fx>
</div>
</td>
This is the code for my CSS
#nav {
text-decoration:none;
padding-bottom:10px;
border-bottom:none;
width:
}
#nav ax {
display:inline;
padding:15px;
padding-left:31px;
padding-right:28px;
background-color:#ececec;
text-decoration:none;
}
#nav bx {
display:inline;
padding:15px;
padding-left:45px;
padding-right:45px;
background-color:#ececec;
text-decoration:none;
}
#nav cx {
display:inline;
padding:15px;
padding-left:45px;
padding-right:45px;
background-color:#ececec;
text-decoration:none;
}
#nav dx {
display:inline;
padding:15px;
padding-left:45px;
padding-right:45px;
background-color:#ececec;
text-decoration:none;
}
#nav ex {
display:inline;
padding:15px;
padding-left:53px;
padding-right:53px;
background-color:#ececec;
text-decoration:none;
}
#nav fx {
display:inline;
padding:15px;
padding-left:30px;
padding-right:30px;
background-color:#ececec;
text-decoration:none;
}
#nav ax:hover {
background-image:url(images/tabbackit.jpg);
background-repeat:repeat-x;
height:900px;
}
#nav bx:hover {
background-image:url(images/tabbackit.jpg);
background-repeat:repeat-x;
height:900px;
}
#nav cx:hover {
background-image:url(images/tabback.jpg);
background-repeat:repeat-x;
height:900px;
}
#nav dx:hover {
background-image:url(images/tabbackproc.jpg);
background-repeat:repeat-x;
height:900px;
}
#nav ex:hover {
background-image:url(images/tabbackfin.jpg);
background-repeat:repeat-x;
height:900px;
}
#nav fx:hover {
background-image:url(images/tabbackhact.jpg);
background-repeat:repeat-x;
height:900px;
}
The way I do this is to give each page its own id in the body tag:
<body id="pgAbout">
Then have a seperate id for each menu item:
<li id="mnuAbout">
Using CSS you can style the link now for the page you're on:
#pgAbout #mnuAbout,
#pgOther #mnuOther
{
/* Styles here */
}
Here's a brief demo
Update
Here's another demo using your own HTML to clarify how it works a bit.
A simple thing you could do is use the same stylesheet for all your pages, but use different CSS classes to highlight the corresponding link on each page. For example, on index.php, use the .active class to highlight the Home link.
Since you're new (as you said), let's break it down:
Use the same CSS for all the pages. However, define two CSS classes for the navbar elements: one is the .regular state, the other is the .active state. In every page, give the link corresponding to that page the active class, while the other links remain in the regular class.
But then, would you want it to remain a link?
It's simple, Just put following code
For example,
On Home page, put following code in HEAD
<style type="text/css">
#nav ax{
background-image:url(images/tabbackit.jpg);
background-repeat:repeat-x;
}
</style>