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   983 Views

Avatar
Lemonie

Community Member, 70 Posts

10 May 2012 at 11:55pm

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

Forum Moderator, 1799 Posts

11 May 2012 at 12:36am

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

Community Member, 332 Posts

11 May 2012 at 4:00am

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

Community Member, 70 Posts

11 May 2012 at 4:55am

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

Community Member, 332 Posts

11 May 2012 at 5:21am

Edited: 11/05/2012 5:31am

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

Community Member, 70 Posts

11 May 2012 at 10:14am

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

Community Member, 332 Posts

11 May 2012 at 10:49pm

Edited: 12/05/2012 12:25am

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

Community Member, 70 Posts

12 May 2012 at 5:19am

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

Go to Top