Help with Horizontal Navigation Bar with Drop Down Menu 3 pages: 1 [2] 3
flower11rose
Posted: Monday, January 23, 2012 4:42:53 PM

Groups: Member

Joined: 11/24/2008
Posts: 14
Could one of you help me to set this menu? I think I did all correct because I don't get errors...With all this, I cannot see the menu on my site....
mikes_photo_designs
Posted: Monday, January 23, 2012 5:28:22 PM
 Zazzle Proseller
Groups: ProSeller

Joined: 12/10/2009
Posts: 525
Location: Mountain View
Are you trying to do a drop down menu ?
flower11rose
Posted: Monday, January 23, 2012 6:15:32 PM

Groups: Member

Joined: 11/24/2008
Posts: 14
Just added it, it works great but appears only in categories pages....Not in the Home...What should I do?
mikes_photo_designs
Posted: Monday, January 23, 2012 10:06:26 PM
 Zazzle Proseller
Groups: ProSeller

Joined: 12/10/2009
Posts: 525
Location: Mountain View
Weird.

The HTML source shows the menu only in Products (which includes the category pages), not in Home, so it's not a CSS issue.

Did you do anything interesting with your content section ?

flower11rose
Posted: Tuesday, January 24, 2012 4:02:10 AM

Groups: Member

Joined: 11/24/2008
Posts: 14
In which sense?
flower11rose
Posted: Tuesday, January 24, 2012 6:53:30 AM

Groups: Member

Joined: 11/24/2008
Posts: 14
Can anybody help me to view the horizontal menu in the main Homepage?
mikes_photo_designs
Posted: Tuesday, January 24, 2012 7:27:43 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 12/10/2009
Posts: 525
Location: Mountain View
Did you make any changes in your Content section under the Content Definition (XML) tab?
flower11rose
Posted: Tuesday, January 24, 2012 7:36:32 AM

Groups: Member

Joined: 11/24/2008
Posts: 14
No, I didn't make any changes...
This is the code I have in the Content section:


<zStick out tongueages st="date_created" sd="" xmlns:z="urn:zazzle:api">
<zStick out tongueage id="css" navigable="false" visible="true" template="csstemplate"></zStick out tongueage>
<zStick out tongueage id="home" title="Home" navigable="true" visible="true" template="hometemplate">
<z:content placeholder="contentpane">
<z:module name="homecontent" visible="true" />
<z:module name="toppicks" visible="false" />
<z:module name="categoriesgrid" visible="false" target="products" view="full" />
<z:module name="homeproducts" visible="true" cg="196133434343529061" />
<z:module name="commentwall" visible="true" />
</z:content>
<z:content placeholder="navpane">
<z:module name="memberinfo" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="categories" visible="true" target="products" />
<z:module name="storenavigation" visible="true" />
<z:module name="storestatistics" visible="false" />
<z:module name="tags" visible="false" target="products" />
</z:content>
</zStick out tongueage>
<zStick out tongueage id="products" title="Products" navigable="true" visible="true" template="maintemplate">
<z:content placeholder="contentpane">
<z:module name="categoryinfo" visible="true" />
<z:module name="categoriesgrid" visible="true" view="scrollynames" />
<z:module name="productsgrid" visible="true" />
</z:content>
<z:content placeholder="navpane">
<z:module name="memberinfo" visible="true" />
<z:module name="productsearch" visible="true" />
<z:module name="categories" visible="true" />
<z:module name="storenavigation" visible="true" />
<z:module name="tags" visible="false" />
</z:content>
</zStick out tongueage>
<zStick out tongueage id="about" title="About" navigable="true" visible="true" template="maintemplate">
<z:content placeholder="contentpane">
<z:module name="about" visible="true" />
</z:content>
<z:content placeholder="navpane">
<z:module name="memberinfo" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="categories" visible="true" target="products" />
<z:module name="storenavigation" visible="true" />
<z:module name="tags" visible="true" target="products" />
</z:content>
</zStick out tongueage>
<zStick out tongueage id="favorites" title="Favorites" navigable="true" visible="true" template="maintemplate">
<z:content placeholder="contentpane">
<z:module name="pagetitle" visible="true" />
<z:module name="favorites" visible="true" />
</z:content>
<z:content placeholder="navpane">
<z:module name="memberinfo" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="categories" visible="true" target="products" />
<z:module name="storenavigation" visible="true" />
<z:module name="tags" visible="true" target="products" />
</z:content>
</zStick out tongueage>
<zStick out tongueage id="myfanclub" title="Fan Club" navigable="true" visible="true" template="maintemplate">
<z:content placeholder="contentpane">
<z:module name="pagetitle" visible="true" />
<z:module name="myfanclub" visible="true" />
</z:content>
<z:content placeholder="navpane">
<z:module name="memberinfo" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="categories" visible="true" target="products" />
<z:module name="storenavigation" visible="true" />
<z:module name="tags" visible="true" target="products" />
</z:content>
</zStick out tongueage>
<zStick out tongueage id="fanclubs" title="Favorite Stores" navigable="true" visible="true" template="maintemplate">
<z:content placeholder="contentpane">
<z:module name="pagetitle" visible="true" />
<z:module name="fanclubs" visible="true" />
</z:content>
<z:content placeholder="navpane">
<z:module name="memberinfo" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="categories" visible="true" target="products" />
<z:module name="storenavigation" visible="true" />
<z:module name="tags" visible="true" target="products" />
</z:content>
</zStick out tongueage>
<zStick out tongueage id="promote" title="Promote This Store" navigable="true" visible="true" template="maintemplate">
<z:content placeholder="contentpane">
<z:module name="promote" visible="true" />
</z:content>
<z:content placeholder="navpane">
<z:module name="memberinfo" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="categories" visible="true" target="products" />
<z:module name="storenavigation" visible="true" />
<z:module name="tags" visible="true" target="products" />
</z:content>
</zStick out tongueage>
</zStick out tongueages>
flower11rose
Posted: Tuesday, January 24, 2012 7:39:11 AM

Groups: Member

Joined: 11/24/2008
Posts: 14
It replaced Stick out tongue with emoticons....
mikes_photo_designs
Posted: Tuesday, January 24, 2012 8:37:32 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 12/10/2009
Posts: 525
Location: Mountain View
flower11rose wrote:
It replaced Stick out tongue with emoticons....


That's OK. Next time put it inside

Code:
a code block   :p  :p  :p 


If you haven't changed the XML content directly, maybe there's something in the regular content settings. What do you have for your content settings (the Settings tab, not the Beta! Advanced tab)?
flower11rose
Posted: Tuesday, January 24, 2012 9:48:27 AM

Groups: Member

Joined: 11/24/2008
Posts: 14
I have this:


Elements to include in my store
*Home
*Products
*Promote This Store
Department Navigation
*Design Options Filter

Set up store homepage
Show Products
*Show Featured Products


Show only products from: ( Change )
> Featured Products
Don't show Products
Top Picks Widget
*Comment Wall
Store Statistics
Display store title

What is marked with * I have
flower11rose
Posted: Tuesday, January 24, 2012 9:51:45 AM

Groups: Member

Joined: 11/24/2008
Posts: 14
I'm sure is a CSS Style setting...To know which! Sad
mikes_photo_designs
Posted: Tuesday, January 24, 2012 1:26:33 PM
 Zazzle Proseller
Groups: ProSeller

Joined: 12/10/2009
Posts: 525
Location: Mountain View
No, it's not a CSS issue - at least not yet.

I took another look at your XML content and found something.

Try changing this:
Code:
<z:page id="home" title="Home" navigable="true" visible="true" template="hometemplate">

to this:
Code:
<z:page id="home" title="Home" navigable="true" visible="true" template="maintemplate">


and see if the menu appears. It might screw something else up though.


What I think is happening is that you're using a new page template for the home page. The template you added oldpampam's menu to is not the one being used by the home page, so it didn't appear on the home page.

Let me know if that works for you.

flower11rose
Posted: Wednesday, January 25, 2012 10:01:24 AM

Groups: Member

Joined: 11/24/2008
Posts: 14
Thank you very much! Problem solved, Pam helped me, it was the XHTML splitted in two and I had to add the Hoover menu code in the Home part too, otherwise it wasn't visible. Thank you all Roses , my shop now is ok! Smile
OLPamPam
Posted: Tuesday, February 14, 2012 4:43:17 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 7/5/2009
Posts: 301
Location: North Bay
Nice additions, Mike. Thanks for contributing.
UTeezSF
Posted: Thursday, February 16, 2012 9:04:26 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 9/6/2007
Posts: 1,008
Location: Bay Area
Does anyone know why this menu code over rides the sidebar link colors and attributes (overline underline) ? I have added the menu to my shops but it made all of the sidebar links black instead of the colors I chose.. anyone? my shop is here
TIA for any help on this..
EverAfter
Posted: Monday, March 26, 2012 9:46:32 PM
 Zazzle Proseller
Groups: ProSeller

Joined: 1/19/2008
Posts: 11
Location: Marlborough
This thread is AMAZINGLY helpful. Thank you so much for sharing your hard work.

I am wondering if anyone is willing to share how to convert the code to a 2 and/or 3 column drop down OR maybe even share the exact code.

I have spent hours trying to figure this out on my own but to no avail.

Anyway, TIA for any help anyone is willing to offer.

Love Love Love
OLPamPam
Posted: Tuesday, March 27, 2012 5:52:55 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 7/5/2009
Posts: 301
Location: North Bay
I did figure that out at one point. I'll look for the code (I'm not using that code in my store anymore, so I hope I can find it).
OLPamPam
Posted: Tuesday, March 27, 2012 5:59:48 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 7/5/2009
Posts: 301
Location: North Bay
Here is for the 2nd drop down menu. There might have been a bit more code added later to move it to the left or right, so you may have to play around a bit with floats and stuff (sorry, I can't remember exactly, it's been a little while). If it's messing up, just let me know and I'll see if I can figure it out again.

Just add to your css:

#menu li:hover ul ul{
position: absolute;
top: 0px;
left:155px;
visibility:hidden;
z-index: 1000;
}
#menu ul ul li:hover ul{
visibility:visible;
z-index: 1000;
}

and for your xhtml, just add a new section to your code.

Here's what I have for 1 added drop to the wedding section. I made the new stuff red:

<div id="menu">
<ul>
<li>
<a href="http://www.zazzle.com/olpampam/gifts?cg=196131967908565793&amp;rf=238339483968853447&amp;tc=zazzlestorehomepage">Weddings</a>
<ul>
<li>
<a href="http://www.zazzle.com/olpampam/gifts?cg=196444062833615157">Floral Suites</a>
<ul>
<li>
<a href="http://www.zazzle.com/olpampam/gifts?cg=196136429679704162">Suite 100</a>
</li>
</ul>

</li>
<li>
<a href="http://www.zazzle.com/olpampam/gifts?cg=196041844296934655">Damask Suites</a>
</li>
EverAfter
Posted: Tuesday, March 27, 2012 3:45:54 PM
 Zazzle Proseller
Groups: ProSeller

Joined: 1/19/2008
Posts: 11
Location: Marlborough
Thank you soooooo much Grin This is a huge help. I will see if I can get it working. fingers crossed Smile
Users browsing this topic
Guest


Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.
Print this topic
RSS Feed
Normal
Threaded