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

Avatar
Lemonie

Community Member, 70 Posts

22 January 2013 at 11:53am

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
copernican

Community Member, 189 Posts

22 January 2013 at 2:28pm

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

Community Member, 70 Posts

23 January 2013 at 1:07am

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
copernican

Community Member, 189 Posts

23 January 2013 at 2:11am

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

Community Member, 70 Posts

23 January 2013 at 2:40am

Will change control to loop.

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

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

Avatar
copernican

Community Member, 189 Posts

23 January 2013 at 5:06am

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.