Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Dynamic javascript menu - how to do it?

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

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

Page: 1 2
Go to End
Author Topic: 6108 Views
  • JimAasheim
    Avatar
    Community Member
    12 Posts

    Re: Dynamic javascript menu - how to do it? Link to this post

    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>

  • codepotato
    Avatar
    Community Member
    14 Posts

    Re: Dynamic javascript menu - how to do it? Link to this post

    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

    6108 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.