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.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Apply different style to each menu item


Go to End
Reply


9 Posts   1742 Views

Avatar
grumpypanda

Community Member, 32 Posts

15 July 2011 at 12:53pm

Edited: 18/07/2011 11:49am

Hi everyone,

Please see my last reply for updates, thank you very much.

Thanks for your great help in the past. I've appled some id and class to certain menu items due to different shape, location and secondary/thrid menu direction in html.

I did my first menu with Silverstripe, and it would apply only to the rest if there is no different id or class involve. I did some search but no direct link I could find. I have attached the picture I'm trying to achieve, and my code so far.

Can someone please point me to the right direction on how to code CMS to my menu? Thanks very much.

<body>
   <div id="top">
      <ul class="sf-menu">
       <% control Menu(1) %>
          <li id="area1">
            <a href="#a">$MenuTitle</a>
             <% if Children %>
               <ul><% control Children %>
                  <li>
                     <a href="#aa">$MenuTitle</a>
                     
                      <% if Children %>
               <ul><% control Children %>
                  <li>
                     <a href="#aa">$MenuImg.SetSize(20,20) $MenuTitle</a>
                  </li>
                  <% end_control %>
                  
                  </ul><% end_if %>
                  </li>
                  <% end_control %>
                  
                  </ul><% end_if %>
               </li>
                  <% end_control %>
            
   
       <li id="area2">
            <a href="#">Area 2</a>
                <ul>
                     <li>
                        <a href="#">Store one</a>
                           <ul>
                              <li><a href="#">Store one-1</a></li>
                              <li><a href="#">Store one-2</a></li>   
                         </ul>
                     </li>
                     <li>
                        <a href="#">Store Two</a>
                           <ul>
                              <li><a href="#">Store Two-1</a></li>
                              <li><a href="#">Store Two-2</a></li>
                           </ul>
                     </li>
                     
                     
                  </ul>
       </li>
      
      </ul>
      
      
      </div>
<div id="test" >
   <ul class="sf-menu sf-vertical">
         <li id="area3">
            <a href="#a"></a>
               <ul>
                  
                <li class="current">
                   <a href="#ab">store 1</a>
                      <ul>
                           
                        <li class="current">
                      <a href="themes/tutorial/photos/image1.jpg" title="Adventure">
                            Adventure
                            </a>
                     </li>
                           
                      <li>
                         <a href="photos/image2.jpg" title="Cats">
                               Cats     </a>
                         </li>      
                           
                     </ul>
                  </li>
               
               </ul>
          </li>
         <li id="area4">
            <a href="#">area4</a>
               <ul class="show_left">
                     <li>
                        <a href="#">Store one</a>
                           <ul class="show_left">
                              <li><a href="#">Store one-1</a></li>
                              <li><a href="#">Store one-2</a></li>
                           </ul>
                     </li>
                     <li>
                        <a href="#">Store Two</a>
                           <ul class="show_left">
                              <li><a href="#">Store Two-1</a></li>
                              <li><a href="#">Store Two-2</a></li>
                           </ul>
                     </li>
                     
                  </ul>
            </li>

      </ul>
      
      </div>
         
            <div id="Content" class="typography">
               
               $Form
            </div>

</body>

Attached Files
Avatar
zenmonkey

Community Member, 528 Posts

16 July 2011 at 2:29am

Well there are a few ways you can customize menu output. You can write your own menu controller to pull pull specific pages or page types or you could use if statements in your Template. It really depends on whats going in the menus and how you're organizing it. I often use a separate menu for Product page than regular pages. So in the product menu I would do something like:

<% control Menu(1) %>
<% if ClassName = Product %>
Link Code Here
<% end if %>
<% end_control %>

Then for the non-product menu I might use something like

<% control Menu(1) %>
<% if ClassName != Product %>
Link Code Here
<% end_if %>
<% end_control %>

You can use the if statements to filter on any field in your Page Class. Take a look at http://doc.silverstripe.org/sapphire/en/reference/built-in-page-controls for some of the possibilities

Avatar
grumpypanda

Community Member, 32 Posts

18 July 2011 at 11:28am

Hi Zenmonkey, thanks for your reply! I have managed to populate two areas with SS. However, with third and fourth areas they are in different div and class from the first two areas. How can I populate them? Sorry I'm new to SS, so any help would be appreciated.

Here is my code.

<div id="top">
<ul class="sf-menu">
      <% control Menu(1) %>
         <li id="pavilion{$Pos}">
            <a href="#a">$MenuTitle</a>
             <% if Children %>
               <ul><% control Children %>
                  <li>
                     <a href="#aa">$MenuTitle</a>
                     
                      <% if Children %>
               <ul><% control Children %>
                  <li>
                     <a href="#aa">$MenuImg.SetSize(20,20) $MenuTitle</a>
                  </li>
                  <% end_control %>
                  
                  </ul><% end_if %>
                  </li>
                  <% end_control %>
                  
                  </ul><% end_if %>
         
            </li>
      <% end_control %>
      
</ul>
</div>

<div id="test" >
<ul class="sf-menu sf-vertical">
         <li id="area3">
            <a href="#a">Area 3</a>      
         </li>
         
         <li id="area4">
            <a href="#">Area 4</a>
               <ul class="show_left">
                     <li>
                        <a href="#">Store one</a>
                           
                     </li>
                     <li>
                        <a href="#">Store Two</a>
                           
                     </li>
                     
               </ul>
         </li>

</ul>
</div>

Avatar
zenmonkey

Community Member, 528 Posts

19 July 2011 at 1:29am

I'm not sure what you are trying to populate it with. The Menu(1) control returns all root level pages in the site tree you can call it as many times as you want on a page. If you want to return the same menu items with a different just call the control and fill it with the markup for the second menu style

<ul class="sf-menu sf-vertical">
<% control Menu(1) %>
<li><a href="$Link">$MenuTitle</a>
<% if Children %>
<ul>
<% control Children %>
li><a href="$Link">$MenuTitle</a></li>
<% end_control %>
</ul>
<% end_if %>
</li>
<% end_control %>
</ul>

Avatar
grumpypanda

Community Member, 32 Posts

19 July 2011 at 8:40am

Hi Zenmonkey,

Thanks very much for your reply. My menu structure is Menu item1 and 2 would be in one div, and Menu item 3 and 4 are in second div with different class. They are all on the same level in Silverstripe. I tried your suggestion but I got the list of Menu 1, 2 in second div as well. How can I tell SS to populate second <div> <ul class="sf-menu sf-vertical"> area with Menu item 3 and 4 only?

Thank you very much for your help.
S:)

Avatar
zenmonkey

Community Member, 528 Posts

19 July 2011 at 8:59am

Ah, now I think I understand. If you want to restrict to that degree you don't need to use Menu Control since you're not dynamically building a menu for those first level items. You can just hard code a link to those pages and build the sub-menus with <% control ChildrenOf(page-url) %>
http://doc.silverstripe.org/sapphire/en/reference/built-in-page-controls#controlling-menus-datafeeds

Avatar
grumpypanda

Community Member, 32 Posts

19 July 2011 at 9:54am

Hi Zenmonkey,

Thanks very much for your fast reply and follow up! Sorry I'm a bit slow on SS. Do you mean I just put the first level menu items in the code rather than SS? Would you be able to give me an example based on my code? I really appreciate your help.

Thanks
S:)

Avatar
zenmonkey

Community Member, 528 Posts

20 July 2011 at 2:39am

Basically you only need to Loop though the children of specific pages so using your example and assuming your urls area based on the Page Name it would look like this

<ul class="sf-menu sf-vertical">
   <li id="area3">
      <a href="area-3">Area 3</a>
   </li>
   
   <li id="area4">
      <a href="area-4">Area 4</a>
      <% if ChildrenOf('area-4') %>
         <ul class="show_left">
            <% control ChildrenOf('area-4') %>
               <li>
                  <a href="$Link">$MenuTitle</a>
               </li>
            <% end_control %>
         </ul>
      <% end_if %>
   </li>
</ul>

Basically in the ChildrenOf brackets you put whatever shows up in MetaData>>URL field in the CMS, then you can look though whatever pages are children of that page. This works fine if you're the end user of the site but it may fall apart if someone else is managing it. Personally I would add another field to the Page Object to specify which Menu Block a page should show in and then keep my css more general. As it stands if the end user decides to call the pages something different, it will fall apart because the URLs will no longer match up.

So you could add a MenuPosition dropdownfield to your page.php then generate all your menus dynamically with something like

<% control Children %>
<% if MenuPostion = Area1 %>
//insert menu markup here
<% end_if %>
<% end_control %>

<% control Children %>
<% if MenuPostion = Area2 %>
//insert menu markup here
<% end_if %>
<% end_control %>

But Thats just me. I always assume the end user will screw it up :) and try to make everything as dynamic as possible. So I'll always filter my different menus either with a special field or page type depending on the nature of the site. For instance if its site with product page I'll filter one navigation to only show the ProductPages and another navigation to show only Non Product Pages

Go to Top