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

SilverStripe CMS v3.0.3 .. navigation


Reply

6 Posts   741 Views

Avatar
Lemonie

22 January 2013 at 11:53am Community Member, 70 Posts

To try and learn more about Silverstripe I have been building my own theme from scratch. My main site is v2.4.7 and am using v3 on my development site.

My navigation from the old site is not working on the new one so can anybody point me in the right direction ? I need the code for navigation.ss and layout.css for a simple dropdown menu like my old site.

www.homelesshounds.org.uk

Avatar
IOTI

22 January 2013 at 2:28pm Community Member, 189 Posts

the code should remain mostly the same from your 2.4.7 site. Could you post the code from your 2.4.7 site and maybe then I could make some recommendations?

Either way you should be using something like

<ul>
<% loop $Menu(1) %>
<li><a href="$Link"></a><% if Childlren %>
<ul>
<% loop $Children %>
<li><a href="$Link"></a></li>
<% end_loop %>
<% end_if %>
</ul>
</li>
<% end_loop %>
</ul>

Avatar
Lemonie

23 January 2013 at 1:07am Community Member, 70 Posts

Hiya

This is my old code which when added just gives me a Server error .. Sorry, there was a problem handling your request.

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

/* ================================================================
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.
=================================================================== */

ul#menu {
   width: 950px;
   margin: 0 auto;
   padding-top: 0px;
   overflow: visible;
background: #fff url(http://i136.photobucket.com/albums/q193/rustybum1/Homeless%20Hounds/Website/PurpleNav.png) repeat center bottom;
}

ul#menu ul {
padding:0;
margin:0;
list-style:none;
position:absolute;
left:-9999px;
}

ul#menu table {
border-collapse:collapse;
font-size: 2.9em;
float:left;
margin:-1px;
}

ul#menu ul li {
list-style: none;
         margin: 0 2px;
         float: left;
         line-height: 2.8em;
         display: block;
}

ul#menu ul li a {
display:block;
line-height:20px;
margin:0;
padding:0 10px;
background:transparent;
width:150px;
}

ul#menu li {
display:inline;
margin:0 -2px;
text-align:left;
}

ul#menu li a {
display:inline-block;
height:35px;
margin:5px 0 0 0;
padding:0 0px 0 0;
background: url() right top;
line-height:30px;
font-size: 1.3em;
font-family: Arial;
text-decoration:none !important;
color:#fff;
}

ul#menu li a.sub {
background: url() right top;
}

html>/**/body ul#menu li {
display:inline-block;
padding:0;
}

* html ul#menu li a.sub {
margin-right:3px;
}

* html ul#menu li a {
margin-bottom:-4px;
}

ul#menu li a b {
display:block;
height:36px;
float:left;
padding:0 0 0 20px;
background: url() left top;
cursor:pointer;
}

ul#menu li a:hover {
position:relative;
background-position:right bottom;
color:#fff;
}

ul#menu li a:hover b {
background-position:left bottom;
}

ul#menu li:hover {
position:relative;
}

ul#menu li:hover > a {
background-position:right bottom;
color:#fff;
}

ul#menu li:hover > a b {
background-position:left bottom;
}

ul#menu :hover ul {
left:1px;
width:105px;
top:41px;
}

* html ul#menu :hover ul {
top:36px;
}

ul#menu :hover ul li {
display:block;
float:left;
margin:0;
border-bottom:1px solid #fff;
}

ul#menu :hover ul li a {
display:block;
float:left;
margin:0;
height:25px;
line-height:25px;
width:140px;
background:#0F0209;
color:#fff;
}

ul#menu :hover ul li a.fly {
background:#0F0209 url(../images/arrow-over.gif) no-repeat right center;
}

ul#menu :hover ul li a:hover {
background:#26FF3B;
color:#26FF3B;
}

ul#menu :hover ul li:hover > a {
background:#9D5D80;
color:#fff;
}

ul#menu :hover ul li a.fly:hover {
background:#9D5D80 url() no-repeat right center;
}

ul#menu :hover ul li:hover > a.fly {
background:#9D5D80 url() no-repeat right center;
}

ul#menu :hover ul ul {
left:-9999px;
}

ul#menu :hover ul :hover ul {
left:105px; top:0;
width:150px;
}

ul#menu :hover ul :hover ul li {
display:block;
float:left;
margin:0;
border-bottom:1px solid #fff;
}

ul#menu :hover ul :hover ul li a {
display:block;
float:left;
margin:0;
height:25px;
line-height:25px;
background:#fff;
color:#fff;
}

ul#menu :hover ul :hover ul li a:hover {
color:#fff;
background:#501033;
}

Avatar
IOTI

23 January 2013 at 2:11am Community Member, 189 Posts

Taking a quick look through your code everything seems fine. I would recommend changing your <% control %> blocks to use <% loop %> instead.

Do you have dev mode enabled? If not, try enabling it from _config.php and let me know if you get a more descriptive error.

Avatar
Lemonie

23 January 2013 at 2:40am Community Member, 70 Posts

Will change control to loop.

This is what I got when I enabled dev mode ...

http://sstripe.homelesshounds.org.uk/SStripe.htm

Avatar
IOTI

23 January 2013 at 5:06am Community Member, 189 Posts

Looks like you might have a few issues, but regarding the menu i believe the culprit is

"Uncaught SSTemplateParseException: Parse error in template on line 6. Error was: Unknown open block "control" encountered"

I think that usually means one of your template tags (the <% %> blocks) is wrong (either miss-spelled or missing) but looking at the code it seems right. After you change the control to loop let me know if that helps at all.