Navigation main changes

[fusionsp]

I have searched for a while and im trying to change the navigation main bar.

To use just images/buttons instead of the standard block its made with.

http://wallandmural-stencils.com/shop/

this site has it going across the top. that is what i would like to create for my navmain. Where/how do i create this part?

[niccol]

well. the menu is produced with unordered list.

So, the styling is done in the <ul> and <li> tags.

One way of approaching it is to set a background image for the <li> tags in the list.

There are plenty of tutorial on the internet about how to create a navigation menu like this from an unordered list.

http://www.alistapart.com/articles/slidingdoors/
http://odyniec.net/articles/css-based-tabbed-menu/

These are actually for navigation tabs but the theory is the same. If you need more help just get in touch.

[fusionsp]

well. the menu is produced with unordered list.

So, the styling is done in the <ul> and <li> tags.

One way of approaching it is to set a background image for the <li> tags in the list.

There are plenty of tutorial on the internet about how to create a navigation menu like this from an unordered list.

http://www.alistapart.com/articles/slidingdoors/
http://odyniec.net/articles/css-based-tabbed-menu/

These are actually for navigation tabs but the theory is the same. If you need more help just get in touch.

hmmm, well i tried for the better part of today to make it work from a few sites. But it looks like with the template im using that im going to have a bit of work to get it right. Oh well, guess I have to start somewhere right. Thanks for the help though.

[niccol]

OK. Well I have had a closer look.

The unordered list is completely broken.

    <ul>

    <li><a href="http://www.fusionspiritualemporium.com//">Home</a>&nbsp;::&nbsp;
    <a href="https://secure.hostmonster.com/~fusionsp//index.php?main_page=login&amp;zenid=24d4453603aef1b1052519b8a3c0e4cf">Log In</a>
&nbsp;::&nbsp;

<li><a href="http://www.fusionspiritualemporium.com//index.php?main_page=shopping_cart&amp;zenid=24d4453603aef1b1052519b8a3c0e4cf">Shopping Cart</a></li>




<!--bof-header ezpage links-->

&nbsp;::&nbsp;  <a href="http://www.fusionspiritualemporium.com//index.php?main_page=privacy&amp;zenid=24d4453603aef1b1052519b8a3c0e4cf">Privacy Notice</a>
<!--eof-header ezpage links-->
</li>
</ul>

A whole load of closing </li> tags are missing. Without a proper structure to the list the display is just not going to play the game. Each list element needs to be enclosed in a pair of <li></li> tags to get the styling to work correctly.

So, to start you need to sort out this unordered list. SOme of the problems may be the template, others may be your own editing. Let's go back to a clean slate.

Find the file: tpl_header.php (templates/yourtemplate/common/)

Find the code section where the div #navMain is built.

In the default file this looks like:

<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

You can find the pairs of <li></li> tags quite clearly. If your version of the file doesn't look like this then we have found an area of 'interest'. I would replace the section in your file with the code above.

If you want to add extra items to the menu this is fine. You just need to make sure that they are part of the unordered list.

So, it might look like:

<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
<li>NEW ITEM HERE</li>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>



<br class="clearBoth" />
</div>
<!--eof-navigation display-->

That will mean that the list is built in a well formed way and then the styling has a bit of chance of working.

The styling you have in the stylesheet doesn't look too far of the mark. Once you have sorted out the list we will be able to see the effect of the styling clearly and tweak it to get that perfect effect.

Let me know how you get on. I am in meetings for the next few hours but after that am at my desk and will help all I can. It looks like you've worked out how to get image backgrounds into the sideboxes and this is just as simple as that so we should have no problem!

Nik

[niccol]

Oh, and it might be helpful to have a unaltered, default version of tpl_header.php handy so you can compare the code.

Attached is one

[fusionsp]

Oh, and it might be helpful to have a unaltered, default version of tpl_header.php handy so you can compare the code.

Attached is one

thank you very much for all of your help. I have been pretty busy lately and havent had a chance to attempt any of the changes but im sure this will make a big difference.

When i first started using this template I noticed a lot of issues. So, it has been a work in progress to fix everything.

So, when I actually can get a chance to work on it I will let you know how it comes out.

Thanks again.