How to create the CSS a:active for my custom menu

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
simonjoomla
Joomla! Intern
Joomla! Intern
Posts: 81
Joined: Wed Jul 02, 2008 3:52 am

How to create the CSS a:active for my custom menu

Post by simonjoomla » Wed Sep 24, 2008 1:13 am

Dear all,

I am trying to create a new menu with CSS called "module_menu2" (the default is "module_menu" in joomla 1.5.7), after applied the CSS, my menu turn out what I wanted. However, I have problem to produce the a:active menu effect. The a:active effect (in red) not only applied to my first level menu ("joomla overview") but also its submenu("What's new in 1.5") as you can see from the attachment. Can you tell me how I should code the CSS in order to create the proper a:active effect on a specific level of menu. thanks.

Following is the CSS I did, you can copy it to your template.css and go to your module manager, open the main menu module, type in "_menu2" at the module class suffix parameter slide, and test it out yourself.

----------------------template.css-------------

/* module_menu2 CSS Menu Custom Style */

div.module_menu2 {
margin: 0;
padding: 0;
margin-bottom: 50px;
}

div.module_menu2 ul{
margin: 0;
padding: 0;
list-style: none;
}

div.module_menu2 ul li{
border-bottom: 1px solid #ccc;
background: #eee;
margin:0px 30px 1px 0px
}

div.module_menu2 ul li a{
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #333;
padding-left:20px;
line-height: 2.5em;
text-decoration: none;
display: block;
}

/* here is the problem*/
div.module_menu2 ul li.active a {
font-weight: bold;
background: red;
color: #FFFFFF;
text-decoration: none;
}

div.module_menu2 ul li a:hover, a.active_menu:link, a.active_menu:visited{
background-color: #000;
font-weight: bold;
color: #fff;
border-bottom: 2px solid red;
border-left: 10px solid red;
}

div.module_menu2 ul li ul{
margin: 0;
padding: 0;
list-style: none;
}

div.module_menu2 ul li ul li{
border-top: 1px solid #ccc;
border-bottom: 0;
background: #fff;
margin:0px 0px 1px 0px
}

div.module_menu2 ul li ul li a{
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #333;
padding-left:30px;
line-height: 2.5em;
text-decoration: none;
display: block;
}

div.module_menu2 ul li ul li a:hover, a.active_menu:link, a.active_menu:visited{
background-color: #fff;
font-weight: bold;
color: #000;
border-bottom: 2px solid red;
border-left: 10px solid red;
}

/* End of module_menu2*/
------------------------------------
You do not have the required permissions to view the files attached to this post.

simonjoomla
Joomla! Intern
Joomla! Intern
Posts: 81
Joined: Wed Jul 02, 2008 3:52 am

Re: How to create the CSS a:active for my custom menu

Post by simonjoomla » Mon Sep 29, 2008 1:16 am

Dear all,

I managed to find a way to add the CSS to indicate the current page for the menu. Here is the CSS I modified.You may test it out and modify yourself. If you have a cleaner, better and a shorter writing this, do share with me. Thank you everyone.


/* New CSS Main Menu (left) - module_menu2 -----------------*/

div.module_menu2 {
margin: 0;
padding: 0;
margin-bottom: 50px;
}

div.module_menu2 ul{
margin: 0;
padding: 0;
list-style: none;
}

div.module_menu2 ul li{
border-bottom: 1px solid #ccc;
background: #eee;
margin:0px 40px 1px 0px;
}

div.module_menu2 ul li a{
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
padding-left:20px;
line-height: 2.5em;
text-decoration: none;
display: block;
}

div.module_menu2 ul li a:link, div.module_menu2 ul li a:visited{
color: #333;
}

div.module_menu2 ul li a:hover, div.module_menu2 ul li a:active{
font-weight: bold;
color: #fff;
background-color: #000;
border-bottom: 2px solid #ff0000;
border-left: 10px solid #ff0000;
}


div.module_menu2 ul li ul{
margin: 0;
padding: 0;
list-style: none;
}

div.module_menu2 ul li ul li{
border-top: 1px solid #ccc;
border-bottom: 0;
background: #fff;
margin: 0;
}

div.module_menu2 ul li ul li a{
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
padding-left:30px;
line-height: 2.5em;
text-decoration: none;
display: block;
}

div.module_menu2 ul li ul li a:link, div.module_menu2 ul li ul li a:visited{
color: #333;
}

div.module_menu2 ul li ul li a:hover, div.module_menu2 ul li ul li a:active{
background-color: #fff;
font-weight: bold;
color: #000;
border-bottom: 2px solid #ff0000;
border-left: 10px solid #ff0000;
}

/* active menu to indicate the current page*/
#current a{
font-size: 1.1em;
font-weight: bold;
color: #fff;
background: #ff0000;
cursor: default;
}

#current a:hover{
text-indent: -10px;
}

#current ul li a{
font-size: 1em;
font-weight: normal;
color: #333;
background: #fff;
cursor: pointer;
}

#current ul li a:hover{

}


Locked

Return to “Templates for Joomla! 1.5”