Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive /

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Dynamic javascript menu - how to do it?


Reply


10 Posts   6135 Views

Avatar
JimAasheim

Community Member, 12 Posts

21 September 2008 at 3:17am

Edited: 09/10/2008 6:41am

Hi,

Here comes the code I had promised...

In the code below you find five levels of depth. Menus with deeper levels need to extend this implementation - but you might also want to take a moment to think about the question whether you really need 6 or more levels...
The CSS stylesheets attached will make the flyout menu work on both IE and non-IE browsers.

Good luck!
Jim

It seems I forgot to attach the code...
Here it is:

         
         <ul id="Menu1">
         <% control Menu(1) %>
            
            <li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
               <a class="hide" href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
               <% if Children %>
                  &nbsp;&nbsp;&gt;
               <% end_if %>
               </a>

               <!--[if lte IE 6]>
               <a href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
               <% if Children %>
                  &nbsp;&nbsp;&gt;
               <% end_if %>
               <table><tr><td>
               <![endif]-->

               
               <% if Children %>
                  <!-- second level menu -->
                  <ul class="menu2">
                  <% control Children %>
                     <li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
                        <a class="hide" href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
                        <% if Children %>
                           &gt;
                        <% end_if %>
                        </a>

                        <!--[if lte IE 6]>
                        <a class="sub" href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
                        <% if Children %>
                           &gt;
                        <% end_if %>
                        <table><tr><td>
                        <![endif]-->

                        <% if Children %>
                           <!-- third level menu -->
                           <ul class="menu3">
                           <% control Children %>
                              <li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
                                 <a class="hide" href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
                                 <% if Children %>
                                    &gt;
                                 <% end_if %>
                                 </a>

                                 <!--[if lte IE 6]>
                                 <a href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
                                 <% if Children %>
                                    &gt;
                                 <% end_if %>
                                 <table><tr><td>
                                 <![endif]-->

                                 
                                 <% if Children %>
                                    <!-- 4th level menu -->
                                    <ul class="menu4">
                                    <% control Children %>
                                       <li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
                                          <a class="hide" href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
                                          <% if Children %>
                                             &gt;
                                          <% end_if %>
                                          </a>
                                          <!--[if lte IE 6]>
                                          <a href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
                                          <% if Children %>
                                             &gt;
                                          <% end_if %>
                                          <table><tr><td>
                                          <![endif]-->

                                          <% if Children %>
                                             <!-- 5th level menu -->
                                             <ul class="menu5">
                                             <% control Children %>
                                                <li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
                                                   <a href="$Link" title="Gehe zu $MenuTitle">$MenuTitle</a>
                                                </li>
                                             <% end_control %>
                                             </ul>
                                          <% end_if %>

                                       <!--[if lte IE 6]>
                                       </td></tr></table>
                                       </a>
                                       <![endif]-->

                                    </li>
                                 <% end_control %>
                                 </ul>
                              <% end_if %>

                                    <!--[if lte IE 6]>
                                    </td></tr></table>
                                    </a>
                                    <![endif]-->
                                 </li>
                              <% end_control %>
                              </ul>
                           <% end_if %>

                        <!--[if lte IE 6]>
                        </td></tr></table>
                        </a>
                        <![endif]-->
                     </li>
                  <% end_control %>
                  </ul>
               <% end_if %>

               <!--[if lte IE 6]>
               </td></tr></table>
               </a>
               <![endif]-->
            </li>
         <% end_control %>
         </ul>

Avatar
codepotato

Community Member, 14 Posts

8 October 2008 at 7:15am

Edited: 08/10/2008 7:39am

Hi,

I'm fairly new to SS, and have built about 2 - 3 sites using this as the monster machine behind it.

I recently came over an issue with trying to create a vertical navigation, and found this thread, but was dissapointed when the code listed above didn't work for me.

With a bit of jiggery pokery, i managed to craft a version, and have posted the code below for everyone else to use.

<ul id="Menu1">
<% control Menu(1) %>
<li><a href="$Link">$MenuTitle</a></li>
       <% if Children %>
          <% control Children %>
             <ul id="Menu2">
                <li class="$LinkingMode $FirstLast"><a href="$Link">$MenuTitle</a></li>
             </ul>
          <% end_control %>
       <% end_if %>
<% end_control %>
</ul>

Hope that helps for those of you that have struggled.

Gareth