Hi
I am trying to create Drop Down menu items. Trying to implement the features as per http://cssmenus.co.uk I have read all the article and created files in the layout section but at the most can only get it to display a entire site menu in the header section. Can anyone please help with this
Much Appreciated. I am using the cloudy theme
We've moved the forum!
Please use forum.silverstripe.org for any new questions
(announcement).
The forum archive will stick around, but will be read only.
You can also use our Slack channel
or StackOverflow to ask for help.
Check out our community overview for more options to contribute.
themes/yourtheme/templates/Includes/Navigation.ss
<ul>
<% control Menu(1) %>
<% if Children %>
<li class="$LinkingMode"><a href="$Link" title="$Title.XML"><b>$MenuTitle.XML</b></a>
<ul class="sub-menu">
<% control Children %>
<li><a href="$Link" title="$Title.XML" class="$LinkingMode"><span>$MenuTitle.XML</span></a></li>
<% end_control %>
</ul>
</li>
<% else %>
<li class="$LinkingMode"><a href="$Link" title="$Title.XML"><b>$MenuTitle.XML</b></a></li>
<% end_if %>
<% end_control %>
</ul>
Layout.css
#menu ul {
float: right;
margin-right: 10px;
}
#menu ul li {
list-style: none;
margin: 0 3px;
float: left;
line-height:34px;
display: block;
background:transparent;
}
#menu ul li a {
float: left;
text-decoration: none;
display: block;
font-size: 14px;
padding: 8px 5px 8px 5px;
color: #FFF;
font-weight:700;
text-transform:uppercase;
}
#menu li ul.sub-menu {
display:none;
}
#menu li:hover ul {
display: block;
list-style: none;
position: absolute;
margin:50px 0 0 -4px;
padding: 0;
width:180px;
background:#000;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
behavior: url(themes/blackcandy/css/border-radius.htc);
}
#menu li:hover ul.submenu li {
list-style: none;
margin: 0 3px;
float: left;
line-height:34px;
display: block;
}
#menu {
background-color: #ec1828;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
behavior: url(themes/blackcandy/css/border-radius.htc);
float: right;
margin: 40px auto 0;
padding: 4px 30px;
position: relative;
z-index: 1;
width:650px;
}
I have modified the code but have got the menus display like a site map. I have attached layout and navigation files.
I have missed something fundamental that is critical to making this work.
Thanks for your help with this. If you need any other files please let me know
change #menu to #navbar in layout
I have changed all the #menu listings to #navbar but still get the same result. The cloudy theme that I downloaded from the silverstrip website had the layout.css file empty except for a reference at the top to say file was there because cms required it but there was no content. I am thinking it may not reference in the standard way.
got it going. Tested this on another theme worked straight away. Using the cloudy theme has mobile app built in so required modification. The standard layout file was blank. Went through the code and got it going, thanks
I would be very thankful to you as I too search for the same few days back :-)