Page 1 of 3
How can I put a menu in here
Posted: Fri Aug 24, 2007 5:39 pm
by leerees
Hi please take a look at
http://www.signmakersdirect.com/about-us.htm
As you can see "this is where the menu" is currently just HTML, what i want to do is convert that into a working dropdown java menu and still have the search box on the right hand side.
Is this possible and does anybody have any idea how to do it, what code to use or what menus / javascript to get, I want it to look like it does now.
Am I going to need to hire someone to do this?
Re: How can I put a menu in here
Posted: Fri Aug 24, 2007 5:49 pm
by RonnyK
Leerees,
check the default template "CSSMenu top......" That calls the menu at that place.
Ronny
Re: How can I put a menu in here
Posted: Fri Aug 24, 2007 6:05 pm
by leerees
Hi I've put it in but look whats happened, its all unformatted. I want it to be a horizontal dropdown menu and on the same line as the search bar. Any ideas
Here's what it looks like now:
http://www.signmakersdirect.com/test.htm
And heres the template code
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
<meta name="author" content="David Herreman (free-css-templates.com)" />
{stylesheet}
<title>LightBiz2</title>
<!--[if IE]>
<![endif]-->
</head>
</__body>
<div id="content">
<div id="header">
<div class="topong">
<div class="pad">
<img src="images/cart.gif" alt="My Cart" />
<h4><a href="#" title="My Cart">VIEW CART</a></h4><br />
<span class="txt">Lorem Ipsum Dolore</span>
</div>
</div>
<div class="topong">
<div class="pad">
<img src="images/account.gif" alt="Account" />
<h4><a href="#" title="My Account">MY ACCOUNT</a></h4><br />
<span class="txt">Lorem Ipsum Dolore</span>
</div>
</div>
<h1><span class="green bigl">S</span>ign<span class="green bigl">M</span>akers<span class="green bigl">D</span>irect</h1>
<span class="slogan">Custom Made Signs Direct To Your Door!</span>
</div>
{* Start Navigation *}
<div id="menu_vert">
<h2 class="accessibility">Navigation</h2>
{menu template='cssmenu.tpl'}
<hr class="accessibility" />
</div>
{* End Navigation *}
<div id="menu">
<div class="pad">
<div id="search">
<form action="#" method="get">
<p><input type="text" name="search" size="20" maxlength="250" class="text" value="" />
<input type="submit" value="Go" class="txt" /></p>
</form>
</div>
<div class="submit">
<ul>
<li><a href="#" title="GOOGLE"><span>THIS</span></a></li>
<li><a href="#" title="products"><span>IS WHERE </span></a></li>
<li><a href="#" title="affiliates"><span>THE MENU WILL</span></a></li>
<li><a href="#" title="about"><span>BE</span></a></li>
<li><a href="#" title="contact"><span>CONTACT</span></a></li>
</ul>
</div>
</div>
</div>
<div id="maincontent">
{content}
<div id="introduction">
<h2>Suspendisse <span class="green">magna</span> est</h2>
<p> Proin tincidunt viverra eros. Phasellus id felis. Proin dui. Etiam tristique. Aliquam erat volutpat. Suspendisse magna
est, faucibus et, tincidunt ac, vehicula a, mi. Ut sed enim. Duis volutpat, neque at dictum volutpat, nibh augue
ornare velit, nec auctor <a href="#" title="">ipsum diam at nibh</a>. Aenean vel massa eu lorem pretium faucibus. Aenean porttitor, augue
non ullamcorper vestibulum, ligula lectus pulvinar nunc, tristique consectetuer leo enim et diam. Aenean lorem
lectus, luctus id, volutpat ut, accumsan ac, risus. Phasellus sit amet nunc. <strong>Cum sociis</strong> natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus.<br /><br />
<a class="readm" href="#" title="">Read more...</a>
</p>
</div>
<div id="rightside">
<h2>Latest <span class="green">News</span></h2>
{cms_module module="news"}
</div>
<div id="leftside">
<div class="r">
<h2>Ipsum <span class="green">Diam</span></h2>
Duis volutpat, neque at dictum volutpat, nibh augue
ornare velit, nec auctor <a href="#" title="">ipsum diam at nibh</a>. Aenean vel massa eu lorem pretium faucibus. Aenean porttitor, augue
non ullamcorper vestibulum, ligula lectus pulvinar nunc, tristique consectetuer leo enim et diam. Aenean lorem
lectus, luctus id, volutpat ut, accumsan ac, risus. Phasellus sit amet nunc.
</div>
<div class="le">
<h2>Nec <span class="green">auctor</span></h2>
Duis volutpat, neque at dictum volutpat, nibh augue
ornare velit, nec auctor <a href="#" title="">ipsum diam at nibh</a>. Aenean vel massa eu lorem pretium faucibus. Aenean porttitor, augue
non ullamcorper vestibulum, ligula lectus pulvinar nunc, tristique consectetuer leo enim et diam. Aenean lorem
lectus, luctus id, volutpat ut, accumsan ac, risus. Phasellus sit amet nunc.
</div>
<div class="pad">
<h2>Suspendisse <span class="green">magna</span> est</h2>
<p> Proin tincidunt viverra eros. Phasellus id felis. Proin dui. Etiam tristique. Aliquam erat volutpat. Suspendisse magna
est, faucibus et, tincidunt ac, vehicula a, mi. Ut sed enim. Duis volutpat, neque at dictum volutpat, nibh augue
ornare velit, nec auctor <a href="#" title="">ipsum diam at nibh</a>.</p>
<div class="rs">
<ul>
<li>List line 1</li>
<li>List line 2</li>
<li>List line 3
<ul>
<li> Sublist line 1</li>
</ul>
</li>
</ul>
</div>
<p>
Aenean vel massa eu lorem pretium faucibus. Aenean porttitor, augue
non ullamcorper vestibulum, ligula lectus pulvinar nunc, tristique consectetuer leo enim et diam. Aenean lorem
lectus, luctus id, volutpat ut, accumsan ac, risus. Phasellus sit amet nunc. <strong>Cum sociis</strong> natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus.<br />
<a class="readm" href="#" title="">Read more...</a>
</p>
</div>
</div>
</div>
<div id="footer">
<p class="right">Copyright © 2006 Your Company, Design: <a href="http://www.free-css-templates.com" title="Designed by David Herreman">free-css-templates.com</a></p>
<p><a href="#">RSS Feed</a> · <a href="#">Contact</a> · <a href="#">Accessibility</a> · <a href="#">Products</a> · <a href="#">Disclaimer</a> · <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a><br /></p>
</div>
</div>
<__body>
</__html>
Re: How can I put a menu in here
Posted: Fri Aug 24, 2007 6:36 pm
by RonnyK
Leerees,
when inserting a CSSmenu, you should insert the calling for the required js-file as well, just above the "":
Code: Select all
<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
<!-- The above JavaScript is required for CSSMenu to work in IE -->
</head>
Also you could attach the default stylesheet, as a starter for the styling (if required):
"Navigation: CSSMenu - Horizontal"
Ronny
ADDED:
The width = 100% by default,
Code: Select all
#menuwrapper {
/* Fix for Opera 8 */
/* overflow: hidden; */
background-color: #ECECEC;
border-bottom: 1px solid #C0C0C0;
width: 100%;
}
If you make that less, you can float a DIV there with the search. I've done similar on
http://test.krijt.eu
Re: How can I put a menu in here
Posted: Fri Aug 24, 2007 6:45 pm
by leerees
Cool.
I've thrown it in and now I have a menu where I want it and it works, trouble is it looks terrible.
http://www.signmakersdirect.com/test.htm
Any ideas why the formattings so messed up.
Here's my code:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
<meta name="author" content="David Herreman (free-css-templates.com)" />
{stylesheet}
<title>LightBiz2</title>
<!--[if IE]>
<![endif]-->
</head>
<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
<!-- The above JavaScript is required for CSSMenu to work in IE -->
</__body>
<div id="content">
<div id="header">
<div class="topong">
<div class="pad">
<img src="images/cart.gif" alt="My Cart" />
<h4><a href="#" title="My Cart">VIEW CART</a></h4><br />
<span class="txt">Lorem Ipsum Dolore</span>
</div>
</div>
<div class="topong">
<div class="pad">
<img src="images/account.gif" alt="Account" />
<h4><a href="#" title="My Account">MY ACCOUNT</a></h4><br />
<span class="txt">Lorem Ipsum Dolore</span>
</div>
</div>
<h1><span class="green bigl">S</span>ign<span class="green bigl">M</span>akers<span class="green bigl">D</span>irect</h1>
<span class="slogan">Custom Made Signs Direct To Your Door!</span>
</div>
{* Start Navigation *}
<div id="menu_vert">
<h2 class="accessibility">Navigation</h2>
<hr class="accessibility" />
</div>
{* End Navigation *}
<div id="menu">
<div class="pad">
<div id="search">
<form action="#" method="get">
<p><input type="text" name="search" size="20" maxlength="250" class="text" value="" />
<input type="submit" value="Go" class="txt" /></p>
</form>
</div>
<div class="submit">
<ul> {menu template='cssmenu.tpl'}
</ul>
</div>
</div>
</div>
<div id="maincontent">
{content}
<div id="introduction">
<h2>Suspendisse <span class="green">magna</span> est</h2>
<p> Proin tincidunt viverra eros. Phasellus id felis. Proin dui. Etiam tristique. Aliquam erat volutpat. Suspendisse magna
est, faucibus et, tincidunt ac, vehicula a, mi. Ut sed enim. Duis volutpat, neque at dictum volutpat, nibh augue
ornare velit, nec auctor <a href="#" title="">ipsum diam at nibh</a>. Aenean vel massa eu lorem pretium faucibus. Aenean porttitor, augue
non ullamcorper vestibulum, ligula lectus pulvinar nunc, tristique consectetuer leo enim et diam. Aenean lorem
lectus, luctus id, volutpat ut, accumsan ac, risus. Phasellus sit amet nunc. <strong>Cum sociis</strong> natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus.<br /><br />
<a class="readm" href="#" title="">Read more...</a>
</p>
</div>
<div id="rightside">
<h2>Latest <span class="green">News</span></h2>
{cms_module module="news"}
</div>
<div id="leftside">
<div class="r">
<h2>Ipsum <span class="green">Diam</span></h2>
Duis volutpat, neque at dictum volutpat, nibh augue
ornare velit, nec auctor <a href="#" title="">ipsum diam at nibh</a>. Aenean vel massa eu lorem pretium faucibus. Aenean porttitor, augue
non ullamcorper vestibulum, ligula lectus pulvinar nunc, tristique consectetuer leo enim et diam. Aenean lorem
lectus, luctus id, volutpat ut, accumsan ac, risus. Phasellus sit amet nunc.
</div>
<div class="le">
<h2>Nec <span class="green">auctor</span></h2>
Duis volutpat, neque at dictum volutpat, nibh augue
ornare velit, nec auctor <a href="#" title="">ipsum diam at nibh</a>. Aenean vel massa eu lorem pretium faucibus. Aenean porttitor, augue
non ullamcorper vestibulum, ligula lectus pulvinar nunc, tristique consectetuer leo enim et diam. Aenean lorem
lectus, luctus id, volutpat ut, accumsan ac, risus. Phasellus sit amet nunc.
</div>
<div class="pad">
<h2>Suspendisse <span class="green">magna</span> est</h2>
<p> Proin tincidunt viverra eros. Phasellus id felis. Proin dui. Etiam tristique. Aliquam erat volutpat. Suspendisse magna
est, faucibus et, tincidunt ac, vehicula a, mi. Ut sed enim. Duis volutpat, neque at dictum volutpat, nibh augue
ornare velit, nec auctor <a href="#" title="">ipsum diam at nibh</a>.</p>
<div class="rs">
<ul>
<li>List line 1</li>
<li>List line 2</li>
<li>List line 3
<ul>
<li> Sublist line 1</li>
</ul>
</li>
</ul>
</div>
<p>
Aenean vel massa eu lorem pretium faucibus. Aenean porttitor, augue
non ullamcorper vestibulum, ligula lectus pulvinar nunc, tristique consectetuer leo enim et diam. Aenean lorem
lectus, luctus id, volutpat ut, accumsan ac, risus. Phasellus sit amet nunc. <strong>Cum sociis</strong> natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus.<br />
<a class="readm" href="#" title="">Read more...</a>
</p>
</div>
</div>
</div>
<div id="footer">
<p class="right">Copyright © 2006 Your Company, Design: <a href="http://www.free-css-templates.com" title="Designed by David Herreman">free-css-templates.com</a></p>
<p><a href="#">RSS Feed</a> · <a href="#">Contact</a> · <a href="#">Accessibility</a> · <a href="#">Products</a> · <a href="#">Disclaimer</a> · <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a><br /></p>
</div>
</div>
<__body>
</__html>
Re: How can I put a menu in here
Posted: Fri Aug 24, 2007 6:48 pm
by Nullig
Have you attached the CSSMenu - Horizontal stylesheet to the template?
Nullig
Re: How can I put a menu in here
Posted: Fri Aug 24, 2007 6:54 pm
by leerees
Hi,
I've attatched Navigation: CSSMenu - Horizontal
Re: How can I put a menu in here
Posted: Fri Aug 24, 2007 7:01 pm
by Nullig
One thing...
This:
Code: Select all
#modules .padding {
padding : 13px 20px 10px 20px;
}
is forcing your 3rd mod text down, as it won't fit beide the image with all that padding. Reducing the left and right padding to 10px seems to solve it.
Nullig
Re: How can I put a menu in here
Posted: Fri Aug 24, 2007 7:02 pm
by leerees
Thanks, I'll try that
what about getting it to look like the menu here:
http://www.free-css-templates.com/demo/LightBiz2/
is this something that's realistically possible?
Re: How can I put a menu in here
Posted: Fri Aug 24, 2007 7:08 pm
by Nullig
Yes, it's possible.
If you style all of your menuwrapper and top menu items as transparent, the background image will show properly.
Nullig
Re: How can I put a menu in here
Posted: Fri Aug 24, 2007 7:14 pm
by Nullig
Also, you haven't attached the accessibility stylesheet to your template, which hides a few things and makes it readable by screen readers.
Nullig
Re: How can I put a menu in here
Posted: Fri Aug 24, 2007 7:21 pm
by leerees
I'm having problems, the menu is aligned ok in firefox but in Ie it appears below the search box, I've tried moving the code up one line but then it appears above the search box, how can i get it to appear in the center like it does in firefox?
http://www.signmakersdirect.com/test.htm
Re: How can I put a menu in here
Posted: Fri Aug 24, 2007 7:29 pm
by Nullig
I think attaching the accessibility stylesheet will solve a few problems.
Nullig
Re: How can I put a menu in here
Posted: Fri Aug 24, 2007 7:31 pm
by Dr.CSS
If you look at the source in Firefox you will see the last div for submit is below the menu and you need to take out the {menu template='cssmenu.tpl'} around the menu, when I hit the search it makes the menu where it should be...
If you take out all the calls for the .submit you will get closer to what you need...
Re: How can I put a menu in here
Posted: Fri Aug 24, 2007 7:37 pm
by Nullig
Here's a few changes that will get you started on the menu...
#menuwrapper {
/* Fix for Opera 8 */
/* overflow: hidden; */
background-color: #transparent;
width: 100%;
}
#primary-nav li li {
width: 100px;
}
#primary-nav li, #primary-nav li.menuparent {
background-color: #transparent;
}
#primary-nav li.menuactive {
background-color: #transparent;
}
Nullig