Expanding Menu css/javascript

HTML & CSS
1

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.


<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 …


/* 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


// 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

2

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:


 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:


 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

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:


 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:


 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;
}

[COLOR=“Purple”]this worked BEAUTIFULLY thanks Paul!

Lee[/COLOR]

4

I still can’t see any javascript that calls this function.


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


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:


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?