1. In your Navigation.ss file add following code (navigation file must be in folder themes/yourtheme-name/templates/Includes):
<ul class="menu"> <% control Menu(1) %> <li><a class="$LinkingMode" href="$Link" title="$Title.XML" alt="$Title.XML" style="text-transform:uppercase;">$MenuTitle</a> <% if Children %> <ul> <% control Children %> <li><a class="$LinkingMode" href="$Link" title="$Title.XML" alt="$Title.XML">$MenuTitle</a></li> <% end_control %> </ul> <% end_if %> </li> <% end_control %> </ul>
2. In your css file you can use this code:
.menu,.menu ul,.menu li,.menu a {margin: 0;padding: 0;border: none;outline: none;} .menu { height: 40px;width: 920px;padding:0;margin:0;float:left;background: #4c4e5a;background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);} .menu li {position: relative;list-style: none;float: left;display: block;height: 40px;} /* Links */ .menu li a {display: block;padding: 0 20px;margin: 6px 0;line-height: 28px;text-decoration: none;border-left: 1px solid #393942;border-right: 1px solid #4f5058;font-family: Helvetica, Arial, sans-serif;font-weight: bold;font-size: 14px;color: #f3f3f3;text-shadow: 1px 1px 1px rgba(0,0,0,.6);-webkit-transition: color .2s ease-in-out;-moz-transition: color .2s ease-in-out;-o-transition: color .2s ease-in-out;-ms-transition: color .2s ease-in-out;transition: color .2s ease-in-out;} .menu li:first-child a { border-left: none; } .menu li:last-child a{ border-right: none; } .menu li:hover > a { color: #37b003; } .menu li > a:hover { color: #37b003; } .menu li > a.current { color: #37b003; } .menu li > a.section { color: #37b003; } /* Sub Menu */ .menu ul {position: absolute;top: 40px;left: 0;opacity: 0;background: #1f2024;text-transform:none;text-transform:none;-webkit-border-radius: 0 0 5px 5px;-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;-webkit-transition: opacity .25s ease .1s;-moz-transition: opacity .25s ease .1s;-o-transition: opacity .25s ease .1s;-ms-transition: opacity .25s ease .1s;transition: opacity .25s ease .1s;z-index:9999;} .menu li:hover > ul { opacity: 1; } .menu ul li {height: 0; overflow: hidden; padding: 0; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease .1s;} .menu li:hover > ul li { height: 36px; overflow: visible; padding: 0;} .menu ul li a {width:210px; padding: 4px 0 4px 30px; margin: 0; border: none; border-bottom: 1px solid #353539;} .menu ul li:last-child a { border: none; }
3. To include the menu to your theme Page.ss file use
<% include Navigation %>
Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!