www.webdeveloper.com
Results 1 to 6 of 6

Thread: show/hide image on unordered list manu

  1. #1
    Join Date
    Mar 2009
    Posts
    7

    show/hide image on unordered list manu

    I am working on a vertical menu that has main links with sub links below it. The sub links appear when you click on the main links (its parent link). I want to use a simple image in place of the default bullet, and it has to show only on the main link depending if the main link and sub links are expanded. I have it so the image shows the way I want it as I click around, but only up to a point.

    What I'm looking for is code that will put the image on the main link if someone lands on that particular section, and then removed when they navigate away to another main or sub link (then the image will appear there instead - on the main link).

    Can someone please help me out?

    Here is my HTML and javascript that I have so far:

    Code:
           <ul class="menu">
                <li class="item1"><a href="page.html">Products</a>  /* has bullet when page loads */
                  <ul>
                    <li class="subitem1"><a href="#">Misc</a></li>
                    <li class="subitem2"><a href="#">Misc</a></li>
                    <li class="subitem3"><a href="#">Misc</a></li>
                    <li class="subitem4"><a href="#">Misc</a></li>
                    <li class="subitem5"><a href="#">Misc</a></li>
                  </ul>
                </li>
                <li class="item2"><a href="#">Service</a>  /* bullet would move here when clicked */
                  <ul>
                    <li class="subitem1"><a href="#">Misc</a></li>
                    <li class="subitem2"><a href="#">Misc</a></li>
                    <li class="subitem3"><a href="#">Misc</a></li>
                    <li class="subitem4"><a href="#">Misc</a></li>
                  </ul>
                </li>
                <li class="item3"><a href="#">Parts</a>  /* bullet would move here when clicked */
                  <ul>
                    <li class="subitem1"><a href="#">Misc</a></li>
                    <li class="subitem2"><a href="#">Misc</a></li>
                    <li class="subitem3"><a href="#">Misc</a></li>
                    <li class="subitem4"><a href="#">Misc</a></li>
                  </ul>
                </li>
              </ul>
    And the js:

    Code:
    <script type="text/javascript">
        $(function() {   
            var menu_ul = $('.menu > li > ul'),
                   menu_a  = $('.menu > li > a');
           
            menu_ul.hide();
             $('.item1 > ul').show();
       
            menu_a.click(function(e) {
                e.preventDefault();           
                if(!$(this).hasClass('active')) {
                    menu_a.removeClass('active');   
                    menu_ul.filter(':visible').slideUp('normal');
                    $(this).addClass('active').next().stop(true,true).slideDown('normal');
                } else {
                    $(this).removeClass('active');
                    $(this).next().stop(true,true).slideUp('normal');
                }
            });
       
        });
    </script>

  2. #2
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,123
    play around with hover selector, here is an example of usage, put the code below in your style tags,

    li.list_swap_image:hover {
    list-style-image:url(./whatever.gif);
    }

    my code expects image in the same folder where code is but you can have image any where, just make sure path is visible to the code.
    Secondly then in the html code for list use the class name list_swap_image
    Last edited by Khalid Ali; 03-07-2014 at 06:33 PM.
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  3. #3
    Join Date
    Mar 2009
    Posts
    7
    Quote Originally Posted by Khalid Ali View Post
    play around with hover selector, here is an example of usage, put the code below in your style tags,

    li.list_swap_image:hover {
    list-style-image:url(./whatever.gif);
    }

    my code expects image in the same folder where code is but you can have image any where, just make sure path is visible to the code.
    Secondly then in the html code for list use the class name list_swap_image
    Hi Khalid,

    Actually, I'm not looking for hover. I'm looking for the bullet image to be static on the active main page link.


    Thanks for your help.

  4. #4
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,123
    huh? Majorly confused...I thought you meant to swap LI bullet to a custom image ...

    I want to use a simple image in place of the default bullet, and it has to show only on the main link depending if the main link and sub links are expanded.


    please elaborate a bit more on your question with better explanation of your need
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  5. #5
    Join Date
    Mar 2009
    Posts
    7
    Take a look at the HTML above.

    If <li class="item1"><a href="">My page</a> is the page that I'm on, then I would like the bullet there (only show one bullet next to the "My page" link on the menu, and nowhere else on the menu). If I'm on any of the child links of <li class="item1"><a href="">My page</a>, still keep the bullet right where it is on that parent - "My page". I don't want any bullets on any sub links.

    If I navigate to <li class="item2"><a href="">My 2nd page</a>, or any child links of "My 2nd page", then move the bullet there, and only there next to the "My 2nd page" link.

    If I navigate to <li class="item3"><a href="">My 3rd page</a>, same thing...move the bullet on that parent link, no matter if I'm on any of its sub links.

    Etc...etc..

    Also, another trick is to make sure the bullet is on whichever parent link when that page is loaded from a link on another page or by direct URL for example. In other words, the bullet needs to be activated just by the page loading and not necessarily simply by clicking from within the menu. I'd imagine each page would require some unique scripting for this?

    I hope that's clear. Let me know if you need more info. I'll be glad to provide it.
    Thanks

  6. #6
    Join Date
    Mar 2009
    Posts
    7
    Hmm... what I'm working on might not work for me. I noticed that clicking the main links do not actually go to the pages They just open the accordion. My intention was to expand them if they need it, AND link to pages. If I remove e.preventDefault(); it sort of works, but not really

    Back to the drawing board with this.

    Thanks for all your help anyways.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles