CSS navigation to change background when being selected

[mkf]

hi everyone,

I recently learned css and jquery so I'm very green @ javascript.

This is my attempt:
http://mh-dev.org/

I took the jquery and css from here, did some tweaks to them though:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

My question is how can I change the background of the selected tab for visual clarity. I couldn't see any code that do this even before I tweak them.

An example is here:

http://www.nichesoftware.co.nz/

Thanks,
mkf

[Deadweight]

I will be helping you with this =P the answer will come in no time =P ill post the code here

[Deadweight]

Ok in the css this is the two things you need to replace:

.jqueryslidemenu ul li a{
display: block;
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
and

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background: red; /*changes the second drop down color*/
}


I think this is what you have wanted? LMK (let me know)

[masumamin6]

Hello Mkf
how can you learn css and jquery please tell me.But i understand css but not jquery.If you don't mind please give me me some link to learn jquery.
Thanks
Tawhidul Amin

[mkf]

@Crazykld69: thanks for the help but it's not what I was aiming for.
take the site that I put as an example (nichesoftware)

If I navigate to index.html then I want the "home" button to change color. If I navigate to any page within the drop down list then I want the "button of the container" to change color. Can this be achieved by tweaking the stylesheet alone or should I dive in deep into the javascript side? I have already fired up an email to the admin of the website but he's a busy man (IT specialist of a Reserve Bank) so I don't know when will I hear from him.

@masumamin6: google is your friend. I learn from w3schools.com and jquery.com

[Deadweight]

Do you want the the color to change once if you hover over the selected link?

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

Change the background to any color to that you want.

[Deadweight]

Ah wait i think i know what you are talking about now. If the Home page is selected then the background of the home page is white. If the background of the Software page is selected then that is white.
Is that what you are looking for?

[mkf]

@Crazykld69: hmm, that's not the one. I'm talking about the background of the css navigation buttons

At the moment "normal - hovering" works however I can't think of a way to indicate which page that I'm actually viewing. For example if I was to write the code in html then I normally put an underscore at the bottom of the text of that individual button. It's fast and minimalistic. However I cannot facilitate the nested menu with html nor I can change the background for an individual css button.

[Deadweight]

http://webdesign.about.com/od/htmltags/f/blfaqlinkcolors.htm

[mkf]

thanks for your help Crazykld69 however those are not what I'm looking for. I do have those overrides for links in the css sheets. I guess I'll invest my time in exploring jquery when I have the time

[Deadweight]

Dude you do not make any sense >.<
There are no buttons on the website.
Maybe u should screenshot what your talking about

[mkf]

Yeah, I guess it's hard without pictures.

It should be something like these pictures. At the moment the website which I'm writing only behaves as state2. I still want to make it behave like state1 - 3

1. Normal
http://i44.photobucket.com/albums/f27/mitsuminh/IT%20Tech/1-1.png

2. Hovering (nearly done)
http://i44.photobucket.com/albums/f27/mitsuminh/IT%20Tech/2-1.png

3. Navigate to somewhere within the "Software" list
http://i44.photobucket.com/albums/f27/mitsuminh/IT%20Tech/3.png

I looked for the theme of the example site and found out it was a Drupal theme called "Acquia Prosper". Still it beyond my current ability to understand these

[Deadweight]

Ok i have one really stupid idea but it will work.
On each page.
Let say "Home"
Where you see the tag

<a href="index.html">Home</a>

Add this:

<a href="index.html" style="color: red">Home</a>

You will have to do this for each page.

The color change only applies to the page your viewing!!!

[mkf]

hmm, that actually works. lol. thanks mate. gonna go with this for now and improve it later

[Deadweight]

Yep no problem