Help with Categories module & Menu bar code.

[TKChris]

Hi, not sure if this is the correct place to post, but here goes. I'm using OSCommerce 2.3.1

 

Menu Bar

I'm struggling a bit to get the code right for my menu bar and hope someone can help, this is the code I have the at the moment:

 

header.php

<script type="text/javascript">
 $("#headerShortcuts").buttonset();
</script>
</div>
<div class="indentmenu">
<ul>
<li><a href=">News</a></li>
<li><a href="http://">Reviews</a></li>
<li><a href="http://">Specials</a></li>
<li><b href="http://">FAQ</b></li>
<li><b href="http://">Contact Us</b></li>
</ul>
</div>
<div class="grid_24 ui-widget infoBoxContainer">
 <div class="ui-widget-header infoBoxHeading"><?php echo '  ' . $breadcrumb->trail(' » '); ?></div>
</div>

I got the code from dynamicdrive.com

http://www.dynamicdr...ss_indent_menu/

 

I'm guessing one of the problems I have is related to the "<li><a" that I changed to "<li><b" because It isn't being read the same as with "a" and therefore the links on the buttons isn't working (ignore the incomplete links, will add them later when I have the pages to link them to).

 

stylesheet.css

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
overflow: hidden;
}
.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 100%; /*width of menu*/
border: 2px solid #000000; /*dark purple border*/
border-width: 2px solid #000000;
background: black url(images/indentbg.jpg) center center repeat-x;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
color: #A4A4A4; /*text color*/
padding: 10px 20px;
text-decoration: none;
border-right: 1px solid #000000; /*dark purple divider between menu items*/
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 11px; /*shift text down 1px for selected and active item*/
padding-bottom: 9px; /*shift text down 1px for selected and active item*/
background: black url(images/indentbg2.jpg) center center repeat-x;
}
.indentmenu ul li b{
float: right;
color: #A4A4A4; /*text color*/
padding: 10px 20px;
text-decoration: none;
border-left: 1px solid #000000; /*dark purple divider between menu items*/
}
.indentmenu ul li b:visited{
color: white;
}
.indentmenu ul li b:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 11px; /*shift text down 1px for selected and active item*/
padding-bottom: 9px; /*shift text down 1px for selected and active item*/
background: black url(images/indentbg2.jpg) center center repeat-x;
}
.clear {
clear: both;
}

 

This is what my site currently looks like:

 

This is what I hope to achieve:

 

Categories Module

For the categories menu on the left I just want to add the effect from here:

http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/

 

The problem I have is that I have no idea where to place the code without adding a whole new side bar menu.

[web-project]

you can create a new DIV and located inside of main menu, with knowledge of css you will do it.

[TKChris]

I managed to fix the menu bar. This is the code I have now:

 

header.php

<div class="indentmenu">
<ul>
<li><a href=">News</a></li>
<li><a href="http://5.88.38.94/XCT/catalog/reviews.php">Reviews</a></li>
<li><a href="http://">Specials</a></li>
<lli><a href="http://5.88.38.94/XCT/catalog/faq.php">FAQ</a></lli>
<lli><a href="http://">Contact Us</a></lli>
</ul>
</div>

 

stylesheet.css

/*Indent Menu*/
.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
overflow: hidden;
}
.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 100%; /*width of menu*/
border: 2px solid #000000;
border-width: 2px solid #000000;
background: black url(images/indentbg.jpg) center center repeat-x;
}
/*Buttons Float Left*/
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
color: #A4A4A4; /*text color*/
padding: 10px 20px;
text-decoration: none;
border-right: 1px solid #000000;
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 11px; /*shift text down 1px for selected and active item*/
padding-bottom: 9px; /*shift text down 1px for selected and active item*/
background: black url(images/indentbg2.jpg) center center repeat-x;
}
/*Buttons Float Right*/
.indentmenu ul lli{
display: inline;
}
.indentmenu ul lli a{
float: right;
color: #A4A4A4; /*text color*/
padding: 10px 20px;
text-decoration: none;
border-left: 1px solid #000000;
}
.indentmenu ul lli a:visited{
color: white;
}
.indentmenu ul lli a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 11px; /*shift text down 1px for selected and active item*/
padding-bottom: 9px; /*shift text down 1px for selected and active item*/
background: black url(images/indentbg2.jpg) center center repeat-x;
}

 

So now it works fine, but there is still a problem and I want to add the search bar and a facebook button inside the menu bar.

 

The problem I have is that on Firefox the menu placement isn't where it should be but in Internet Explorer and Chrome it is fine.

 

ScreenShot of Firefox:

[TKChris]

I have everything working now, only need to add the search bar and facebook button to the menu bar.