Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: CSS navigation to change background when being selected

  1. #1
    Join Date
    Aug 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default CSS navigation to change background when being selected

    hi everyone,

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

    This is my attempt:
    Code:
    http://mh-dev.org/
    I took the jquery and css from here, did some tweaks to them though:
    Code:
    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:
    Code:
    http://www.nichesoftware.co.nz/
    Thanks,
    mkf

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    342
    Thanks
    5
    Thanked 33 Times in 31 Posts

    Default

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

  3. #3
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    342
    Thanks
    5
    Thanked 33 Times in 31 Posts

    Default

    Ok in the css this is the two things you need to replace:
    Code:
    .jqueryslidemenu ul li a{
    display: block;
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #2d2b2b;
    text-decoration: none;
    }
    and
    Code:
    /*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)

  4. The Following User Says Thank You to Deadweight For This Useful Post:

    mkf (08-14-2011)

  5. #4
    Join Date
    Aug 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by jscheuer1; 08-14-2011 at 02:04 PM. Reason: remove unauthorized sig

  6. #5
    Join Date
    Aug 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    @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

  7. #6
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    342
    Thanks
    5
    Thanked 33 Times in 31 Posts

    Default

    Do you want the the color to change once if you hover over the selected link?
    Code:
    .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.

  8. #7
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    342
    Thanks
    5
    Thanked 33 Times in 31 Posts

    Default

    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?

  9. #8
    Join Date
    Aug 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    @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.

  10. #9
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    342
    Thanks
    5
    Thanked 33 Times in 31 Posts

  11. #10
    Join Date
    Aug 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •