How can I put a menu in here

leerees · Post by **leerees** » Fri Aug 24, 2007 5:39 pm

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?

RonnyK · Post by **RonnyK** » Fri Aug 24, 2007 5:49 pm

Leerees,

check the default template "CSSMenu top......" That calls the menu at that place.

Ronny

leerees · Post by **leerees** » Fri Aug 24, 2007 6:05 pm

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>

RonnyK · Post by **RonnyK** » Fri Aug 24, 2007 6:36 pm

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

leerees · Post by **leerees** » Fri Aug 24, 2007 6:45 pm

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>

Nullig · Post by **Nullig** » Fri Aug 24, 2007 6:48 pm

Have you attached the CSSMenu - Horizontal stylesheet to the template?

Nullig

leerees · Post by **leerees** » Fri Aug 24, 2007 6:54 pm

Hi,

I've attatched Navigation: CSSMenu - Horizontal

Nullig · Post by **Nullig** » Fri Aug 24, 2007 7:01 pm

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

leerees · Post by **leerees** » Fri Aug 24, 2007 7:02 pm

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?

Nullig · Post by **Nullig** » Fri Aug 24, 2007 7:08 pm

Yes, it's possible.

If you style all of your menuwrapper and top menu items as transparent, the background image will show properly.

Nullig

Nullig · Post by **Nullig** » Fri Aug 24, 2007 7:14 pm

Also, you haven't attached the accessibility stylesheet to your template, which hides a few things and makes it readable by screen readers.

Nullig

leerees · Post by **leerees** » Fri Aug 24, 2007 7:21 pm

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

Nullig · Post by **Nullig** » Fri Aug 24, 2007 7:29 pm

I think attaching the accessibility stylesheet will solve a few problems.

Nullig

Dr.CSS · Post by **Dr.CSS** » Fri Aug 24, 2007 7:31 pm

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...

Nullig · Post by **Nullig** » Fri Aug 24, 2007 7:37 pm

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

CMS Made Simple Forums

How can I put a menu in here

How can I put a menu in here

Re: How can I put a menu in here

Re: How can I put a menu in here

Re: How can I put a menu in here

Re: How can I put a menu in here

Re: How can I put a menu in here

Re: How can I put a menu in here

Re: How can I put a menu in here

Re: How can I put a menu in here

Re: How can I put a menu in here

Re: How can I put a menu in here

Re: How can I put a menu in here

Re: How can I put a menu in here

Re: How can I put a menu in here

Re: How can I put a menu in here