CMS Made Simple Forums

Posted: **Thu Jul 17, 2008 2:11 pm**

Hey folks,

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>

CSS

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

Posted: **Thu Jul 17, 2008 2:30 pm**

Just call the menu twice with a given parent-pages, or startpage, to have it fixed...

Ronny

Posted: **Thu Jul 17, 2008 2:31 pm**

Set the pages home, about, location, contact (using those aliases) to not show in the menu and use:

Code: Select all

<div id="menuStrip">
     {menu template='minimal_menu.tpl' items="home,about,location,contact"}
</div>

Then the rest of the pages can be called with the regular menu tag:

Code: Select all

<div id="mainMenu">
	<div id="top"></div>
	{menu template='cssmenu.tpl' number_of_levels="1"}
</div>

Of course, you can change the menu templates you use to suit your setup.

Nullig

Posted: **Thu Jul 17, 2008 2:50 pm**

Thanks for the replies guys (that'll be the poet in me again

)

I actually got it working as I wanted. What I did was take two copies of simple_navigation.tpl and added an IF statement to both: one only outputting the horizontal menu (which should never change) and the other outputting all other menu items (ie when the user adds other pages they will be added to the left column menu).

I had a try at what Nullig suggested and that worked just as well, but I'm not really sure what Ronny means. I think I'll just leave it as it is now.

Again, thanks very much for your suggestions.

PS...Like the avatar Nullig...kinda hypnotic...X-)

Posted: **Thu Jul 17, 2008 2:58 pm**

There are lots of ways to do it. You could also use "prefixes" for your menu item aliases, like:

top_home
top_about
top_location
etc.

side_facilities
side_events
etc.

Then make your menu calls like:

{menu template='cssmenu.tpl' excludeprefix="side_"} < for the top one
{menu template='cssmenu.tpl' excludeprefix="top_"} < for the side one

Nullig

CMS Made Simple Forums

[SOLVED] Can I have two 'top-level' menus in my template?

[SOLVED] Can I have two 'top-level' menus in my template?

Re: Can I have two 'top-level' menus in my template?

Re: Can I have two 'top-level' menus in my template?

Re: Can I have two 'top-level' menus in my template?

Re: [SOLVED] Can I have two 'top-level' menus in my template?