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

I have the code now where to put it? help


Go to End
Reply

9 Posts   942 Views

Avatar
Lemonie

10 May 2012 at 11:55pm Community Member, 70 Posts

I am trying to get a charity website up and running. I understand that you want people to learn for themselves but at the moment I need to get the site up and running and money coming in!

I would like to install a simple dropdown menu on the site. I have downloaded the code from cssmenu.co.uk and have tried implementing it with disasterous results. My menu content disappeared and the menu flew out and across the header to the left.

I am using the 'centered' option here: cssmenus.co.uk/dropdown.html

I have uploaded the images .. no problem as am changing them.
I am fine with the .css

<b>the navigation element itself I am not fine with</b>

-----------------------------------------------------------------------------------------------------

<ul id="menu">
   <li><a href="index.html"><b>Home</b></a></li>
   <li><a href="single.html"><b>Single Level</b></a></li>
   <li class="current"><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="sub1">
         <li><a class="fly" href="#url">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="fly1">
               <li><a href="#url">Dropdown 1.1</a></li>
               <li><a href="#url">Dropdown 1.2</a></li>
               <li><a href="#url">Dropdown 1.3</a></li>
               <li><a href="#url">Dropdown 1.4</a></li>
               <li><a href="#url">Dropdown 1.5</a></li>
               <li><a href="#url">Dropdown 1.6</a></li>
            </ul>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li class="currentsub"><a class="fly" href="#url">Dropdown two<!--[if gte IE 7]><!--></a><!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="fly2">
               <li><a href="#url">Dropdown 2.1</a></li>
               <li><a href="#url">Dropdown 2.2</a></li>
               <li class="currentfly"><a href="#url">Dropdown 2.3</a></li>
               <li><a href="#url">Dropdown 2.4</a></li>
               <li><a href="#url">Dropdown 2.5</a></li>
            </ul>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li><a href="#url">Dropdown three</a></li>
         <li><a href="#url">Dropdown four</a></li>
         <li><a class="fly" href="#url">Dropdown five<!--[if gte IE 7]><!--></a><!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="fly3">
               <li><a href="#url">Dropdown 5.1</a></li>
               <li><a href="#url">Dropdown 2.2</a></li>
               <li><a href="#url">Dropdown 3.3</a></li>
            </ul>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
      </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a class="sub" href="dropline.html"><b>Dropline</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="sub2">
         <li><a href="#url">Dropline one</a></li>
         <li><a href="#url">Dropline two</a></li>
         <li><a href="#url">Dropline three</a></li>
         <li><a href="#url">Dropline four</a></li>
         <li><a href="#url">Dropline five</a></li>
         <li><a href="#url">Dropline six</a></li>
      </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a class="sub" href="flyout.html"><b>Flyout</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="sub3">
         <li><a href="#url">Flyout one</a></li>
         <li><a href="#url">Flyout two</a></li>
         <li><a href="#url">Flyout three</a></li>
         <li><a href="#url">Flyout four</a></li>
      </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li id="support"><a href="support.html"><b>Support</b></a></li>
   <li id="contact"><a href="contact.html"><b>Contact</b></a></li>
</ul>

---------------------------------------------------------------------------------------------------------------------

I just really don't know where to start with this, please help.

Avatar
swaiba

11 May 2012 at 12:36am Forum Moderator, 1796 Posts

I believe you are looking for...

themes\YOURTHEMENAME\templates\Includes\Navigation.ss

not this shows the first level menu only, you'll need to combine it with templates\Includes\SideBar.ss that shows the second level of menu.

The key is the

<% control Menu(1) %>

or

<% control Menu(2) %>

Avatar
Webdoc

11 May 2012 at 4:00am Community Member, 332 Posts

made dropline like so:

<ul id="dropline">
   <% control Menu(1) %>
   <% if Children %>
   <li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><b>$MenuTitle.XML</b></a>
         <div>
         <ul>
         <% control Children %>
         <li class="current_sub"><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle.XML</span></a></li>
         <% end_control %>
         </ul>
         </div>
   </li>
   <% else %>
   <li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><b>$MenuTitle.XML</b></a><div>
         <ul></ul>
         </div></li>
   <% end_if %>
   <% end_control %>
</ul>

Avatar
Lemonie

11 May 2012 at 4:55am Community Member, 70 Posts

Thanks for the replies.

I have added the css (uploaded below) and added webdocs code (thank you) but the result is all the menu's showing at once (have attached a screenshot.

Any ideas what is causing this?

Attached Files
Avatar
Webdoc

11 May 2012 at 5:21am (Last edited: 11 May 2012 5:31am), Community Member, 332 Posts

if your sitetree structure for dropdown is like so:

Page 1
-subpage 1
-subpage 2
--subpage for subpage 2
Page 2
Page 3

it works tryed in my server - http://www.e-sstonia.ee/demo/
themes/yourtheme/templates/Includes/Navigation.ss

<ul id="menu">
<% control Menu(1) %>
<% if Children %>
<li class="$LinkingMode"><a class="sub" href="$Link" title="Go to the $Title.XML page"><b>$MenuTitle.XML</b></a>
<ul>
<% control Children %>
<li>
             <a <% if Children %>class="fly"<% else %><% end_if %> href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle.XML</span></a>
             <% if Children %>
             <ul class="fly">
             <% control Children %>
             <li>
             <a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle.XML</span></a>
             </li>
             <% end_control %>
             </ul>
             <% end_if %>
             </li>
<% end_control %>
</ul>
</li>
<% else %>
<li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><b>$MenuTitle.XML</b></a><div>
<ul></ul>
</div></li>
<% end_if %>
<% end_control %>
</ul>

Avatar
Lemonie

11 May 2012 at 10:14am Community Member, 70 Posts

Thanks for that Webdoc. I now have a menu where it should be with dropdowns. The only problem now is that the dropdowns go behind the body/content area:

http://www.homelesshounds.org.uk/index.php/

Avatar
Webdoc

11 May 2012 at 10:49pm (Last edited: 12 May 2012 12:25am), Community Member, 332 Posts

In your Layout.css line 483 where is - ul#menu - remove overflow:hidden;
also find line: ul#menu :hover ul li a - and change the width for something biger then the drop down will be wider @ moment its 95px change like 125px then your Fostering Application menu will be in one line;

Avatar
Lemonie

12 May 2012 at 5:19am Community Member, 70 Posts

Thank you soo much Webdoc. I really appreciate your help.

Go to Top