I've had a look through the default templates that are provided with CMS-MS, but none of them seem offer what I'm looking for so I've built my own template. This template needs to have two menus: one running horizontally beneath the page header and the other down the left column. It basically looks like the default template 'Top simple navigation + left subnavigation + 1 column', but I need the left navigation to appear on every page as it is a separate menu, not a sub-menu of anything in the horizontal menu. How easy would this be to implement, and what would I need to do to achieve this?
Here is the html and css for what I mean:
HTML
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trnsitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2 menu + 1 column</title>
</head>
</__body>
<div id="wrapper1">
<div id="wrapper2">
<div id="header"></div>
<div id="menuStrip">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">LOCATION</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div id="mainContent">
<div id="spacer"></div>
<div id="mainMenu">
<div id="top"></div>
<ul>
<li><a href="#">Facilities</a></li>
<li><a href="#">Upcoming Events</a></li>
<li><a href="#">Schedules</a></li>
<li><a href="#">Results</a></li>
<li><a href="#">Latest News</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</div>
<div id="contentCol">
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut eleifend cursus sapien. Praesent semper, est ac viverra ultricies, neque erat faucibus turpis, accumsan mattis urna urna id nibh. Vestibulum congue vehicula lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper. Quisque gravida porttitor dui. Sed ut turpis nec arcu convallis mollis. In sollicitudin tortor vel diam. Mauris a sem. Donec erat lorem, ornare a, pulvinar sed, elementum a, augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec feugiat fringilla justo. Morbi est nunc, iaculis nec, commodo eget, condimentum.
</div>
</div>
</div>
<div id="footer">
My Footer Text
</div>
</div>
</div>
<__body>
</__html>
Code: Select all
body {
font-family: verdana, arial, sans-serif;
background-color: #ffffff;
}
h5 {
margin-top: 0;
padding-top: 15px;
}
#wrapper1 {
width: 900px;
margin-left: auto;
margin-right: auto;
}
#wrapper2 {
}
#header {
width: 100%;
height: 225px;
background-color: #103461;
}
#menuStrip {
margin: 0;
padding: 0;
height: 29px;
width: 900px;
background-color: #106262;
}
#menuStrip ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
}
#menuStrip ul li {
float: left;
text-align: center;
margin: 0;
padding: 0;
display: inline;
position: relative;
}
#menuStrip ul li a {
height: 17px;
background-color: #106243;
padding-top: 5px;
padding-bottom: 7px;
margin: 0;
color: #fff;
text-decoration: none;
display: block;
text-decoration: none;
font-family: times new roman, serif;
width: 150px;
}
#menuStrip ul li a:hover {
background-color: #106235;
}
#mainContent {
width: 898px;
padding: 0;
border-left: solid 1px #384579;
border-right: solid 1px #384579;
background-color: url(images/downmenubg.jpg);
background-repeat: repeat-y;
}
#mainContent #spacer {
width: 100%;
height: 10px;
background-color: #dcf4ff;
}
#mainContent #mainMenu {
width: 250px;
float: left;
}
#mainContent #mainMenu #top {
width: 100%;
height: 26px;
background-color: #dcf4ff;
}
#mainContent #mainMenu ul {
list-style-type: none;
margin-top: 0;
padding-left: 0;
}
#mainContent #mainMenu ul li {
width: 100%;
height: 29px;
line-height: 29px;
padding-left: 20px;
background-color: #526210;
background-repeat: no-repeat;
}
#mainContent #mainMenu ul li:hover {
background-color: #625b10;
}
#mainContent #mainMenu ul li a,#mainContent #mainMenu ul li a:hover, #mainContent #mainMenu ul li a:visited {
text-decoration: none;
color: #ffffff;
}
#mainContent #contentCol {
margin-left: 250px;
color: #4d6e89;
background-color: #dcf4ff;
}
#mainContent #contentCol #content {
width: 620px;
margin: 0 15px;
padding-bottom: 15px;
}
#footer {
position: relative;
top: -16px;
width: 100%;
height: 45px;
line-height: 45px;
font-size: small;
text-align: center;
color: #ffffff;
clear: both;
background-color: #621d10;
}
#footer a, #footer a:hover, #footer a:visited {
text-decoration: none;
color: #ffffff;
}
)