Joomla Templates Club 406,261 posts

[frame4 Friend frame4Join date: December 2006Posts: 62Downloads:0Uploads:7]

#117852

Hi,

I am looking to implement a rollover colour in the menu’s of JA Antares, for example the Other Menu. I need a little pointer as to if the template colour is blue, let’s say, how/where to add a piece of code in the CSS so that I will have a blue “bar” showing up when I point it at a specific menu item? A bit like in the left vertical menu here:

http://www.dynamicdrive.com/

Thanks in advance.

Regards,
Anthony

[Hung Dinh Friend Hung DinhJoin date: September 2014Posts: 4408Downloads:11Uploads:189 Thanks: 309 Thanked: 3310 times in 3 posts]

#212275

Find this codes in template_css.css

#ja-topnav ul#mainlevel-nav a {
display: block;
float: right;
padding: 0 12px;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
}


add this code below


#ja-topnav ul#mainlevel-nav a:hover {

text-decoration: underline;
}

Now you can see the changes when mouseover

[frame4 Friend frame4Join date: December 2006Posts: 62Downloads:0Uploads:7]

#212278

Hi,

This did not work for me … in any case did not give me what I need. Funny thing is that


#ja-topnav ul#mainlevel-nav a:hover {
}


already exists in template_cs..css file, and if I add


text-decoration: underline;


to it, I just get underlined menu items in the topnav on mouseover, which is to be expected. What I would like is like the attached 😀

Hope you can help??

Regards,
Anthony

---

Attachments:

1. 

[Hung Dinh Friend Hung DinhJoin date: September 2014Posts: 4408Downloads:11Uploads:189 Thanks: 309 Thanked: 3310 times in 3 posts]

#212285

change this:


/* Default Joomla! Menu */
a.mainlevel {
padding: 4px;
display: block;
color: #5A5A5A;
text-decoration: none;
background: url(../images/seperator.gif) repeat-x bottom;
}

a.mainlevel:hover,
a.mainlevel:active,
a.mainlevel:focus,
a.mainlevel#active_menu {
background: url(../images/seperator.gif) repeat-x bottom;
color: #5A5A5A;
text-decoration: none;
}

into


/* Default Joomla! Menu */
a.mainlevel {
padding: 4px;
display: block;
color: #5A5A5A;
text-decoration: none;
background: url(../images/seperator.gif) repeat-x bottom;
}

a.mainlevel:hover,
a.mainlevel:active,
a.mainlevel:focus,
a.mainlevel#active_menu {
background: #8080FF;
color: #5A5A5A;
text-decoration: none;
}


[frame4 Friend frame4Join date: December 2006Posts: 62Downloads:0Uploads:7]

#212297

Great! Thanks, that did the trick … I can now play around with it 🙂

Regards,
Anthony

[proxaal oxaal Friend proxaal oxaalJoin date: September 2014Posts: 71Downloads:0Uploads:5 Thanks: 3]

#212302

How can I get this in the included menu? Worked fine in the joomla-menu.

[Hung Dinh Friend Hung DinhJoin date: September 2014Posts: 4408Downloads:11Uploads:189 Thanks: 309 Thanked: 3310 times in 3 posts]

#212304

What menu do you want to use? You can view source and find the css name of the menu item then define the css.

[proxaal oxaal Friend proxaal oxaalJoin date: September 2014Posts: 71Downloads:0Uploads:5 Thanks: 3]

#212309

But I cant figger out how. Could someone tell me how to?

[Author]

Posts