SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Expanding Menu css/javascript

    Hi,

    I'm having trouble with creating my side menu. I think it is a a css/javascript problem. The site is being build in WP so I can't alter the html as it is generated server side. Any and all help is welcome.

    Here we go!

    The issues.
    1stly the show hide isn't working (am i not targeting the right level? in the css or javascript)

    2ndly If I click on a parent link e.g. About. When the page navigates there, the sub links can no longer be clicked e.g. history
    Whats going on?

    I am using code from http://green-beast.com for the menu.
    It returns the following html on my site.
    HTML Code:
    <div style="margin: 0pt; padding: 0pt; overflow: hidden; width: 225px;" class="builder-module-block-outer-wrapper builder-module-sidebar-outer-wrapper left clearfix">
    <div class="builder-module-block builder-module-sidebar builder-module-sidebar-1-left builder-module-sidebar-with-element sidebar left clearfix">
    <div class="widget-wrapper widget-wrapper-single single widget-wrapper-1">
        <div id="text-3" class="widget widget-1 widget-top widget_text"> <div class="textwidget"><script src="library.js" type="text/javascript"></script></div>
            </div><div id="execphp-4" class="widget widget-2 widget-bottom widget_execphp">            
                <div class="execphpwidget"> <!--See Note 1-->
    
     <ul id="nav">
     <!--See Note 2-->
         <li class="current_page_item">
        <a title="You are Home" href="http://loveleecreations.com/toastmasters">Home</a>
       </li>
      <!--See Note 3-->
     <li class="page_item page-item-2"><a title="About" href="http://loveleecreations.com/toastmasters/?page_id=2">About</a>
    <ul>
        <li class="page_item page-item-16"><a title="History" href="http://loveleecreations.com/toastmasters/?page_id=16">History</a></li>
        <li class="page_item page-item-18"><a title="Mission" href="http://loveleecreations.com/toastmasters/?page_id=18">Mission</a></li>
    </ul>
    </li>
    <li class="page_item page-item-3"><a title="Contact" href="http://loveleecreations.com/toastmasters/?page_id=3">Contact</a>
    <ul>
        <li class="page_item page-item-9"><a title="Members Area" href="http://loveleecreations.com/toastmasters/?page_id=9">Members Area</a></li>
    </ul>
    </li>
    <li class="page_item page-item-24"><a title="Benefits of Toastmasters" href="http://loveleecreations.com/toastmasters/?page_id=24">Benefits of Toastmasters</a></li>
     <!--See Note 4
      <li>
       <a class="rss" rel="alternate" href="http://loveleecreations.com/toastmasters/?feed=rss2" title="Really Simply Syndication">RSS Feed</a>
      </li>-->
     </ul></div>
            </div></div>
    
    </div>
    </div>
    The refering CSS is ...
    Code:
    /* This styles the unordered list element to remove bullets and align the text */
     ul#nav {
       list-style-type : none;
       text-align : right;
     }
    
     /*
      This styles the links. It’s a block-level link and the text is positioned
      with padding. Other styles are defined: width, colors, text attributes, etc.
     */
     ul#nav a{
        background-color : #B1D0E5;
        padding : 10px 5px 2px 10px;
        margin-bottom : 5px;
        width : 180px;
        height : auto;
        color : #333;
        font-weight : normal;
        font-style : normal;
        display : block;
        text-decoration : none;
        text-align : left;
     }
    
    
     /* This is only necessary for IE6 else the link margins will collapse on hover */
     ul#nav li {
       margin-bottom : 5px;
     }
    
     /* This removes the default left margin (indentation) */
     ul#nav li {
       margin-left : 0;
     }
    ul#nav li ul li{
        list-style-type: none; 
     }
     /*
      Now to offer some hover and focus styles. Further specification of focus/active styles
      could be added but I didn’t do it in this example. I didn’t feel it was needed
     */
     ul#nav a:hover, ul#nav a:focus, ul#nav a:active {
       background-color : #E8A73A;
       color : #fff;
     }
    
    
     /*
      This style the single state of the “current_page_item” class link. 
     */
     ul#nav li.current_page_item a, ul#nav li.current_page_item a:hover,
     ul#nav li.current_page_item a:focus, ul#nav li.current_page_item a:active {
        background-color : #EDB961;
        color : #fff;
        cursor : default;
        text-align : right;
     }
     
    ul#nav li.current_page_item a .flipme_hide ul {
                            display: none;
                        }
            
                        ul#nav li.current_page_item a .flipme_show ul {
                            display: block;
                        }
    The javascript is

    Code JavaScript:
    // Show-Hide Script for Side Menu
    function flipme(e) {
        e.blur();
        test=e.parentNode.className;
        if (test.match('flipme_show')) {
            e.parentNode.className=test.replace('flipme_show','flipme_hide');
        } else e.parentNode.className=test.replace('flipme_hide','flipme_show');
        return false;
    }
    The testsite is http://loveleecreations.com/toastmasters/
    To see the problem in working form.

    Thanks for taking the time to read this post, and any help.

    Lee
    "The greatest good you can do
    for another is not just share
    your riches, but to reveal to
    him, his own." -Benjamin Disraeli

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by loveLee View Post
    Hi,

    The issues.
    1stly the show hide isn't working (am i not targeting the right level? in the css or javascript)
    I couldn't find your Javascript to check. It's not where you are pointing to it.


    2ndly If I click on a parent link e.g. About. When the page navigates there, the sub links can no longer be clicked e.g. history
    Whats going on?
    You would need to reset the nested lists to its previous styles as the currentpage link styles will cascade.

    e.g. Add this:

    Code:
     ul#nav li.current_page_item li a {
        background-color : #B1D0E5;
        color : #333;
        cursor : pointer;
        text-align :left;
    }
    That code will need to go after this rule in the css file:

    Code:
     ul#nav li.current_page_item a, ul#nav li.current_page_item a:hover,  ul#nav li.current_page_item a:focus, ul#nav li.current_page_item a:active {
        background-color : #EDB961;
        color : #fff;
        cursor : default;
        text-align : right;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I couldn't find your Javascript to check. It's not where you are pointing to it.
    *facepalms* oops I had it in the template area.
    So now I have changed it to the right area, it is still not working. Any ideas?


    You would need to reset the nested lists to its previous styles as the currentpage link styles will cascade.

    e.g. Add this:

    Code:
     ul#nav li.current_page_item li a {
        background-color : #B1D0E5;
        color : #333;
        cursor : pointer;
        text-align :left;
    }
    That code will need to go after this rule in the css file:

    Code:
     ul#nav li.current_page_item a, ul#nav li.current_page_item a:hover,  ul#nav li.current_page_item a:focus, ul#nav li.current_page_item a:active {
        background-color : #EDB961;
        color : #fff;
        cursor : default;
        text-align : right;
    }
    this worked BEAUTIFULLY thanks Paul!

    Lee
    "The greatest good you can do
    for another is not just share
    your riches, but to reveal to
    him, his own." -Benjamin Disraeli

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I still can't see any javascript that calls this function.

    Code:
    <script type="text/javascript">
    function flipme(e) {
        e.blur();
        test=e.parentNode.className;
        if (test.match('flipme_show')) {
            e.parentNode.className=test.replace('flipme_show','flipme_hide');
        } else e.parentNode.className=test.replace('flipme_hide','flipme_show');
        return false;
    }</script>
    The page you linked to as an example doesn't seem to have an expanding menu either so I was a little confused.

    I would assume that when a menu item is clicked then the above class should be added to the elements concerned so that the class would then hide or show the menu.

    You seem to be targeting the wrong elements anyway as an anchor will never have a ul as a nested child.

    Code:
    ul#nav li.current_page_item a .flipme_hide ul {
        display: none;
    }
    ul#nav li.current_page_item a .flipme_show ul {
        display: block;
    }
    That would more likely be something like this:

    Code:
    ul#nav li.flipme_hide ul {
        display: none;
    }
    ul#nav li.flipme_show ul {
        display: none;
    }
    Where is the original menu that you are copying this code from?


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
  •