Simple Custom Navigation Bars and Drop Down Sub-Menus

[gwpriester]

The question of how to create custom drop down menus comes up from time to time. And since I have some time, I thought I would share my method. (Open and Preview the attached .web document to see these drop down menus in action.

Create a new layer and MouseOver layer for each sub menu. Sub-menu MouseOver layers need to be numbered, (e.g. MouseOver-1, MouseOver-2, etc.)

Add menu buttons to the sub-menu layer. Make clones and cut and paste the clones to the MouseOver layer for the specific menu.

Link the primary navigation bar buttons to the appropriate layers. In my example I created my own buttons and did not use the Navigation Bar Tool. So each primary button is separate.

I find the Mouse-Over link (Website Properties > Link > Mouse-Over > Show Pop-up Layer works best because the sub-menu automatically closes when the visitor moves the cursor away from the bar.

[gwpriester]

I really don't know why I bother.

[browj2]

Because you're good at it. Thanks for the tutorial!

[EVERLAST&GREEN]

I have never posted on any board before in my life. Very new to using Xara. I am doing a website that will have 10 main pages for 10 product categories and then each of those product categories have a page where there are little thumb nails of each of the products in that category and then each thumb nail opens up to the appropriate page for that specific item. I was a little surprised when I found out Xara does not allow you to easily make subpages (child pages under the "parent" page). So when I saw your little tutorial here I tried duplicating the procedure on one of these product categories: "Commerical Anodes" On the index page I created the layer with the page name that "Commerical Anodes" is supposed to link to "Commercial Anode Products" and the "MouseOver-1" layer. Then copied the button from the "Zeta Theme" template which is what I have modified considerably - just used it to get the "circle" images. But I see a problem the "submenu" that would have "Commerical Anode Products" button is visible all the time. It needs to be a fly-out and only when its "moused over." How do I get that, please? Also you said you did not use the NAV bar to do this but the "Mouse-Over" link. I am totally confused. Can you please elaborate on this process or give me step by step using what I have given or point me in the direction I need to go. Thank you

[Boy]

I really don't know why I bother.

Thanks for the tut and sample menu, Gary. I have no immediate need for it and put it in my Xara resource folder. Your work is very much appreciated!

[gwpriester]

Can you please elaborate on this process or give me step by step using what I have given or point me in the direction I need to go. Thank you

This is the reason I posted my .web file.

When you add buttons to the menu layers, the buttons must first be on the menu layer and the mouse over version on the specific menu layer's mouseover layer. If the two buttons are softgrouped when you put them on the layer, both button states will be on the Menu layer.

You can also create a nav bar and use the Popup Menu Styles to modify the submenus.

Do a search for Navigation Bars in the Help ... > Index area. This is a more automatic method for creating sub menus.

[Egg Bramhill]

Welcome YAHUSHUAHRULES

I think you're getting Gary's dropdown solution mixed up with the way you wish to create a multipage website.

You want to create a site that has 10 catogories with 10 products per catogory.

Okay you already require 100 pages on your site!

Add more catogories & more products per catogory and your site very soon becomes very difficult to manage as well as needing the complete site to be uploaded after each and every minor amendment.

So you need to split your site into subsites contained in subfolders. That way you only require to update the subsite/subfolder.

Let's know if your following this up to now?

[EVERLAST&GREEN]

Yes, thank you I am following what you are saying. My part of this is doing the one page per each product category and then the page that opens to thumb nails of all products in that category. After that the actual e-commerce part for each product page is turned over to someone else. But I understand why a person would want to have as many separate websites as are product categories to minimize the loading time for a humongous website. To limit to only what is being called forth. I am just having issues as to how to implement navigation to the various levels of this. On the main web site the navigation bar links to all the main product category information pages. Now how do I get the navigation bar to have a submenu for the product category thumbnails that eventually each thumbnail will link to the e-commerce page for that item. I would expect each item's thumb nail to link to that specific e-commerce (shopping cart) page but not need a submenu any "deeper" since all products are represented with thumb nails on the product category page that allows customers to browse by the thumbnails with model numbers. So my main issue is how to get that submenu to appear only when a specific main menu item it "moused over" and not be visible at any other time. Sorry if I am redundant. I am just trying to clarify. Thank you so much for your kind response to a real newbie