Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

horizontal navigation menu


mariusmoisa

Recommended Posts

i've made my first horizontal navigation menu after a tutorial :

 

the first part :

<div id="navbar">

 

<div id="holder">

 

<ul>

 

<li><a href="#" id="onlink">Home</a></li>

<li><a href="#">Albums</a></li>

<li><a href="#">Artists</a></li>

<li><a href="#">Upload</a></li>

<li><a href="#">Request</a></li>

 

</ul>

 

</div> <!-- end holder div -->

 

</div> <!-- end navbar div -->

 

 

the second part :

 

 

#navbar {

width:660px;

}

 

#navbar #holder {

height:64px;

border-bottom:1px solid #000;

width:630px;

padding-left:25px;

}

 

#navbar #holder ul {

list-style:none;

margin:0;

padding:0;

}

 

#navbar #holder ul li a {

text-decoration:none;

float:left;

margin-right:5px;

line-height:23px;

font-family:"Arial Black", Gadget, sans-serif;

color:#000;

border:1px solid #000;

border-bottom:none;

padding:20px;

width:75px;

text-align:center;

display:block;

background:#69F;

-moz-border-radius-topleft:15px;

-moz-border-radius-topright:15px;

-webkit-border-top-left-radius:15px;

-webkit-border-top-right-radius:15px;

}

 

#navbar #holder ul li a:hover {

background:#F90;

color:#FFF;

text-shadow:1px 1px 1px #000;

}

 

and the third part :

 

 

#holder ul li a#onlink {

background:#FFF;

color:#000;

border-bottom:1px solid #FFF;

}

 

#holder ul li a#onlink:hover {

background:#FFF;

color:#69F;

text-shadow:1px 1px 1px #000;

}

 

 

now i , for one , have this problem : where , for Jupiter , i must put these parts ??? because the tutorial stopped without telling where to put those parts. thank you.

Link to comment
Share on other sites

First part: includes/header.php

Second part: stylesheet.css

 

That will make a pretty menu, but it won't actually do anything. For that you'll need a bunch of PHP.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

There area number of good horizontal menus in the contributions list, esp those using jquery. Search for 'horizontal menu' on the contributions page.

 

You can't produce a horizontal menu in OSCommerce with just html and css are yours appears to be above. Adapting tutorials found outside of OSCommerce takes some work. The contributions mentioned above take html and weave it into the oscommerce php programming. Make life easy and use one of these, you can always change the CSS of a menu to get the look you need after you have it installed and working.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

thank you for your answers but i really want to learn to work with osc not just drag and drop a contribution . i want to know what every line of that damn code does :) , and for that i must do it my self .

 

now my site www.soundell.com has that menu but its way out of line and i want to drop it at the bottom of the header .

Link to comment
Share on other sites

Well done for trying something different with your menu. Changing a menu that is constucted as yours is for use on oscommerce is not that hard.

 

If you are linking to pages within oscommerce you must us something like

 

<li><a href="<?php echo tep_href_link(FILENAME_CONTACT_US) ?>">Contact Us</a></li>

<li><a href="<?php echo tep_href_link(FILENAME_PRODUCTS_NEW) ?>"> New Products </a></li>

 

Use your includes/filenames to ensure that the page links are correct. Using this method will keep the osc session id.

 

It is also possible to make a menu with dropdown boxes and there are many tutorials on the internet to do this.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

Hi,

Here is an example of npn2531 (jase) horizontal categories working on 2.31 had to tweak a bit suppose with a bit of further tweaking you could also add the page links view the page source.

www.demo1.osc-design.com/

John

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

thank you for that , as for the drop down menu , is not an option for me because i will have 5-6 main categories that do not have subcategories . all the subcategories will be set as tags ( in a diferent page or a pop-up ) . i design my site to be simple , straight with less wire and more content . now my focus is on the header , because 65 % of the guests will decide if they buy only after seeing the header.

Link to comment
Share on other sites

ok, banging my head on the table i cant find a solution to place the nav bar on the right place ( above the bread crumb ) . any help can and will be appreciated , thank you.

Link to comment
Share on other sites

and this is the code :

 

 

1. header :

 

 

<div id="header" class="grid_24">

 

<div id="navbar">

 

<div id="holder">

 

<ul>

 

<li><a href="<?php echo tep_href_link(FILENAME_CONTACT_US) ?>">Contact Us</a></li>

<li><a href="<?php echo tep_href_link(FILENAME_PRODUCTS_NEW) ?>"> New Products </a></li>

<li><a href="#">Artists</a></li>

<li><a href="#">Upload</a></li>

<li><a href="#">Request</a></li>

 

</ul>

 

<div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>

 

 

 

2. stylesheet ( with the help of ianhaney ) :

 

#header {

 

height: 300px;

background-image:url(images/background-image.png);

 

}

 

#storeLogo {

float: left;

margin-top: 80px;

margin-left:25px;

 

}

 

#headerShortcuts {

float: right;

margin-top: 15px;

background-color:#00F;

 

}

 

TD.headerNavigation {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

background:#F00;

color:#FFF;

font-weight : bold;

 

}

 

#navbar {

 

width: 100%;

overflow:hidden;

margin-left:15px;

text-align:center;

 

}

 

#navbar #holder {

width: 960px;

margin-left: 0px;

padding: 0;

font: 11px Verdana; /* font style and size */

list-style-type: none;

text-align: left; /* "left", "center", or "right" align menu */

 

}

 

#navbar #holder ul {

display: inline-block;

position:relative;

padding: 2px;

margin-left: 0px;

text-align:center;

margin-right: 5px; /* right margin between menu items */

 

}

 

#navbar #holder ul li a {

display:inline-block;

padding: 5px;

min-width:50px; /* horizontal diameter of spotlight */

height:50px; /* vertical diameter of spotlight */

text-decoration: none;

color: black;

margin: 0 auto;

overflow:hidden;

 

 

}

 

#navbar #holder ul li a:hover {

color: white;

background: #69F; /* background color of spotlight */

-moz-border-radius-topleft:15px;

-moz-border-radius-topright:15px;

-webkit-border-top-left-radius:15px;

-webkit-border-top-right-radius:15px;

 

}

 

#navbar li a span{

position:relative;

top:35%; /* move text down so it appears centered within menu item */

}

#holder ul li a#onlink {

background:#FFF;

color:#000;

border-bottom:1px solid #FFF;

}

 

#holder ul li a#onlink:hover {

background:#FFF;

color:#69F;

text-shadow:1px 1px 1px #000;

}

Link to comment
Share on other sites

This is not going to work with hardcoded links. You need to use the OSCommerce format or customers will be dropping sessions. Moreover there is no php coding in here to create the proper category addresses from the database. You really need to start with one of the contributions for a horizontal menus, you still get the opportunity to learn what's going on, the contributions are not plug and play. (I wish they were, that would be nice!)

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Hi,

 

Try header

 

 

<div id="header" class="grid_24">

<div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>

 

<div id="headerShortcuts">

<?php

echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .

tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .

tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

 

if (tep_session_is_registered('customer_id')) {

echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));

}

?>

</div>

 

<script type="text/javascript">

$("#headerShortcuts").buttonset();

</script>

</div>

 

<div class="grid_24 ui-widget infoBoxContainer">

<div class="ANYMENU">

<ul>

<li><a href="<?php echo tep_href_link(FILENAME_DEFAULT); ?>"><span>Back Home</span></a></li>

<li><a href="<?php echo tep_href_link('products_new.php'); ?>"><span>New Products</span></a></li>

<li><a href="<?php echo tep_href_link('shipping.php'); ?>"><span>Shipping</span></a></li>

<li><a href="<?php echo tep_href_link('sfaq.php'); ?>"><span>FAQ's</span></a></li>

<li><a href="<?php echo tep_href_link('contact_us.php'); ?>"><span>Terms and Conditions</span></a></li>

<li><a href="<?php echo tep_href_link('privacy.php'); ?>"><span>Privacy</span></a></li>

<li><a href="<?php echo tep_href_link('login.php'); ?>"><span>Login/Register</span></a></li>

</ul>

</div>

<div class="ui-widget-header infoBoxHeading"><?php echo '  ' . $breadcrumb->trail(' » '); ?></div>

</div>

 

And then the css in stylesheets the css

 

John

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

thank you for your answers .

 

@@joli1811 thank you for your code but it destroyed the site :(

 

anyway i will start from scratch a new nav bar something closer to my original idea . hope it will be better too ... :D . and i might make it more php ( beginner level ) .

 

fingers cross , in bocca al lupo , hals und beinbruch , slainte , sa dea dracu , etc.

Link to comment
Share on other sites

Like the ssláinte mhaith :D hals und beinbruch ist auch nicht schlecht the code is for a fresh install

 

http://www.demo3.osc-design.com/ look at page source!

 

Just adding a nav bar without the bells and whistles I think you are missing a closing </div> somewhere

 

I would start with original header.php and template_top.php as your buttons are repeating etc..

 

John

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...