Jump to:

23373 Posts in 18175 Topics by 2865 members

General Questions

SilverStripe Forums » General Questions » Drop Down Menus with Silverstripe

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

Page: 1 2 3 4 5
Go to End
Author Topic: 14610 Views
  • arthurdent
    Avatar
    Community Member
    153 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    Thanks to all who posted on this topic, especially willr. I'm trying to do a simple two level dropdown on a custom template that I am building and have struck a problem. Downloaded Menu1.ss and installed, then added the include code to HomePage.ss and Page.ss. Rebuilt database and went back to site to find an error page which said, amongst other things, the following:

    /**
    269     * Used by <% include Identifier %> statements to get the full
    270     * unparsed content of a template file.
    271     *
    272     * @uses getTemplateFile()
    273     * @param string $identifier A template name without '.ss' extension or path.
    274     * @return string content of template
    275     */
    276    public static function getTemplateContent($identifier) {
    277       return file_get_contents(SSViewer::getTemplateFile($identifier));
    278    }
    279    
    280    /**
    281     * @ignore
    282     */
    283    static private $flushed = false;


    Can anybody point me in the right direction?

  • ulysses
    Avatar
    Community Member
    57 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    I was recently helped by another SS user community.

    I changed the standard Olivesunet theme to incroporate the drop down menus and they work really well on both FF & IE.

    See the implementation at: http://www.sunnynook.school.nz/

    Here is what you need to do.

    The CSS is from cssmenus.co.uk so if you need more information on how the CSS works check that out. Remember to back up your files before changing them in case something goes bad.

    Ok first open the Navigation.ss file which is in themes/themename/templates/includes/

    It currently looks like the following (hopefully)

    -----------------------------------------------------------------------------
    <ul>
    <% control Menu(1) %>
    <li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span></a></li>
    <% end_control %>
    </ul>
    -----------------------------------------------------------------------------

    You want to change it to be this:

    -----------------------------------------------------------------------------Copy below line

    <!-- [if IE6]><div id="IE6"><![endif]-->
    <ul id="menu1">
    <% control Menu(1) %>
    <% if Children %>
       <li class="$LinkingMode"><a href="$Link" class="sub" title="View more info about $Title"><span>$MenuTitle</span>
       <!--[if gte IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul class="fly $LinkingMode">
          <% control Children %>
          <% if Children %>
          <li class="$LinkingMode"><a href="$Link" class="fly" title="View more info about $Title"><span>$MenuTitle</span>
          <!--[if gte IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->

          <ul>
             <% control Children %>
                <li><a href="$Link" title="View more about $Title" class="$LinkingMode">$MenuTitle</a></li>
             <% end_control %>
          </ul>

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

       <li><a href="$Link" title="View more about $Title" class="fly $LinkingMode">$MenuTitle</a></li>
          <% end_if %>
          <% end_control %>
       </ul>
       <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
       <% else %>
          <li class="$LinkingMode"><a href="$Link" class="top_link" title="View more info about $Title"><span>$MenuTitle</span></a></li>
          <% end_if %>
          <% end_control %>
    </ul>
    <!-- [if IE6]></div><![endif]-->

    -----------------------------------------------------------------------------Stop Copying

    This should allow for 2 layers deep.

    Next step is to add the CSS you can either add as a new file or i just recommend adding it to the end of the layout.css file located in theme/themename/CSS/

    Add the following. At the very end of the file.

    -----------------------------------------------------------------------------Copy below line

    /* Drop Down Menu code */
    #pad {height:135px;}
    /* ================================================================
    This copyright notice must be untouched at all times.

    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssmenus.co.uk
    Copyright (c) 2009- Stu Nicholls. All rights reserved.
    This stylesheet and the associated (x)html may be modified in any
    way to fit your requirements.
    =================================================================== */
    #menu1 {padding:0; margin-top:0px; list-style:none; height:10px; position:relative; z-index:500;}
    #menu1 li {float:left; margin-right:1px;}
    #menu1 li a {display:block; float:left; height:10px; line-height:30px; color:#000; text-decoration:none; font-weight:normal; padding:0 30px 0 25px;}

    #menu1 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

    /* Default link styling */

    /* Style the list OR link hover. Depends on which browser is used */

    #menu1 li a:hover {z-index:200; position:relative;color:#fff; }
    #menu1 li:hover {position:relative; z-index:200;}

    #menu1 li:hover > a {color:#fff; background:#8d8c5b;}
    #menu1 li:hover > a.sub {color:#fff; background-color:#8d8c5b;}

    #menu1 li.current a {color:#fff; background:#8d8c5b;}

    #menu1 li a.sub {background: url(../images/down-arrow.gif) no-repeat right center;}
    #menu1 li.current a.sub {color:#fff; background:#8d8c5b url(../images/down-arrow.gif) no-repeat right center;}

    #menu1 :hover ul {left:0; top:30px; width:120px; background:#444;}

    /* keep the 'next' level invisible by placing it off screen. */
    #menu1 ul,
    #menu1 :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

    #menu1 :hover ul :hover ul
    {left:120px; top:-1px; background:#8d8c5b; white-space:nowrap; width:100px; z-index:200; height:auto;}

    #menu1 :hover ul li {margin:0; border-top:1px solid #666;}
    #menu1 :hover ul li a {width:180px; padding:0; text-indent:10px; background:#333; color:#ccc; height:30px; line-height:30px;}
    #menu1 :hover ul li a.fly {background:#333 url(../images/right-arrow.gif) no-repeat right center;}

    #menu1 :hover ul :hover {background-color:#8d8c5b; color:#fff;}
    #menu1 :hover ul :hover a.fly {background-color:#8d8c5b; color:#fff;}

    #menu1 :hover ul li.currentsub a {background:#595959; color:#fff;}
    #menu1 :hover ul li.currentsub a.fly {background:#595959 url(../images/right-arrow.gif) no-repeat right center; color:#fff;}

    #menu1 :hover ul :hover ul li a {width:180px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;}
    #menu1 :hover ul :hover ul :hover {background-color:#8d8c5b; color:#fff;}

    #menu1 :hover ul :hover ul li.currentfly a,
    #menu1 :hover ul :hover ul li.currentfly a:hover {background:#8d8c5b; color:#fff;}

    -----------------------------------------------------------------------------Stop Copying

    I also had to change the following in the #Navigation section:

    /*** Main Nav ***/
    #Navigation {
       width: 710px;
       height: 3em;    
       margin: 0;
    /*   overflow: hidden; */
       overflow: visible;   
       background: #7e7d49 url(../images/o_menu_bg.png) no-repeat center bottom;
    }

    Note: see that the code "overflow: hidden" has been commented out and repalce with "overflow: visible" which was needed to display the dropdown menu.

    When you have uploaded the changes, you need to flush the template by adding ?flush=1 to the end of your site address, this will hopefully display your menus.

    Please note that the images "down-arrow.gif" & "right-arrow.gif" though they are referenced in the CSS above are not included in my implementation as they appeared on the menu items whether there was a sub menu or not. I prefer these arrows only to appear if there is a sub menu otherwise, it should n ot. So I left the code in here but just not uplaoded the images. The images must be uploaded to the images folder of the them you are working with.

    I hope this helps you. I definitely got up and running with the information I was provded.

    All the best.

    Mauricio

  • Willr
    Avatar
    Forum Moderator
    5489 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    arthurdent - Try changing the following line to the bottom one

    return file_get_contents(SSViewer::getTemplateFile($identifier));

    return ($file = SViewer::getTemplateFile($identifier)) ? file_get_contents($file) : false;

  • arthurdent
    Avatar
    Community Member
    153 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    Ulysses, willr, thanks to you both! Willr, I was so close to getting it working your fix was the easiest to implement. All working now!!
    Ulysses, nice site for Sunnynook School (I used to drive past there every day on a daily basis years ago) - dropdowns on your site work well but I did find if difficult to move from first to second level menus due to the white space between - you might like to look at this. I'm using FireFox 3 browser for Mac OS X... can send you screenshot if you wish!

  • hive.net.au
    Avatar
    Community Member
    40 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    Hi ulysses

    I was actually going to post the email up I sent you, but you beat me to it. Glad I could be of assistance, the end result for the schools looks great.

    Cheers
    Adam

  • ulysses
    Avatar
    Community Member
    57 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    Hi Adam.

    I thought it would be great to share my success at getting the drop down menus working when I saw the request for assistance from another user.

    I have fine tuned the drop down for Sunnynook school further and having some minor difficulties in getting some componewnts of it working on the standard Black Candy theme. See http://sstest.ulysses.co.nz/parent-teacher-association/

    First of all the curved edges are above the menu instead of below.
    Secondly, the whie highlight of the current selected menu appears on the sub menu instead of the top level menu item.

    If you go to the link above, mouse over the About Us link, you'll see what I mean on the drop down that appears.

    If you can suggest how to fix this, would be great.

    Mauricio

  • StarForce
    Avatar
    Community Member
    11 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    hello

    really like it great work

    i just have one problem

    is it possible to change the style of a top link even when i´m at a subpage of it?

    here is a example:
    http://sstest.ulysses.co.nz/

    when i´m at "products" page, "products is highlighted in the menu (white background)
    but when i´m at music cd´s page (which is a subpage of products), products is not highlighted.
    Do you know how to fix this, so products is also highlighted?

    hope you understand what i mean^^

    Thanks in advance

    StarForce

  • BryanCYW
    Avatar
    Community Member
    1 Post

    Re: Drop Down Menus with Silverstripe Link to this post

    Hi Will,

    Can you please attacth the menu.css file again.

    Really need you help

    Thank You

    Regards
    Bryan

    Are you talking about a dropdown menu (like navigation) or a dropdown select form? I use the CSSPlay menus alot on my projects. Like californiawomen.org. I have attached an example Menu1.ss (the html needed) and Menu.css ( the css needed for it). You can just place the Menu.ss in yourtheme/templates/Includes/* and include it in your theme with <% include Menu1 %>. The CSS you can copy and put in your own CSS file or include this file seperatly

    I haven't attached all the images etc and you might need to tweak the styles for your project but should be a start for you.

    14610 Views
Page: 1 2 3 4 5
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.