• Toll-free  888-665-8637
  • International  +1 717-220-0012
Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error
Floating Navigation for Sub Categories
Options Go to last post Go to first unread
Previous Topic Next Topic
casti004
#1 Posted : Tuesday, January 29, 2008 2:58:42 PM(UTC)
casti004

Rank: Member

Joined: 1/18/2008(UTC)
Posts: 50
Hi,

Does anyone have a quick fix or good idea how to integrate a Floating Navigation for Sub Categories?

I saw an example bv store (http://www.bellabeachwear.com/) that has this, but it seems to have a lot of php scripting.

Any ideas?

Thanks,

Dave
casti004
#2 Posted : Wednesday, January 30, 2008 12:04:44 AM(UTC)
casti004

Rank: Member

Joined: 1/18/2008(UTC)
Posts: 50
Also,

I want to display the subcategories on the front page.

Is this possible.
casti004
#3 Posted : Thursday, January 31, 2008 9:59:00 PM(UTC)
casti004

Rank: Member

Joined: 1/18/2008(UTC)
Posts: 50
well, to explain the problem more in detail, the current code is generating simple unordered list tags basically without having a class referenced to it.

The code I've written in the past used a .submenu class to reference the a:hover element, so when called it the submenu would appear.

Does anyone know where in the system code to add this class or have any better ideas?
I was trying to avoid javascript and thought this could be done by css only.

See my code below that is not working:



.sidemenu ul, .categorymenu ul {padding:0;margin:0;background: transparent url(../images/NavBG.gif);}
.sidemenu li, .categorymenu li {padding: 0;margin:0;list-style-type:none;list-style-position:outside; line-height:1.6em;}

.sidemenu ul li ul, .categorymenu ul li ul
{
display: block;
position: absolute;
left: 200px;
visibility: hidden; // this will hide the box until it is hovered on
width: 9em;
z-index: 1000;
}



/*
fix up the submenu items
voice-family lines screen correct CSS values from browsers that
improperly lay out block-level boxes and have broken CSS parsers
(IE5.5/Win)
*/
.sidemenu ul li ul li, .categorymenu ul li ul li
{

}


.sidemenu ul li ul li a, .categorymenu ul li ul li a
{

}

.sidemenu ul li a:hover ul, .categorymenu ul li a:hover ul {visibility: visible;} // HERE IS WHERE I WOULD REFERENCE THE SUBMENU CLASS!!!!


.sidemenu li a, .categorymenu li a {padding: 0 0 0 35px; margin:0;background: transparent url(../images/Nav1.gif) no-repeat top left;}
.sidemenu li a:hover, .categorymenu li a:hover {text-decoration:none; background: transparent url(../images/Nav1Hover.gif) no-repeat left;}

.categorymenu ul li.current a { font-weight: bold; background: transparent url(../images/Nav1Hover.gif) no-repeat left;}
.categorymenu ul li.current ul a { font-weight: normal;padding: 0 0 0 55px;text-decoration:none; background: transparent url(../images/Nav1SubCat.gif) no-repeat left;}
kastway
#4 Posted : Saturday, February 2, 2008 4:12:28 AM(UTC)
kastway

Rank: Member

Joined: 10/7/2005(UTC)
Posts: 43
I too am curious about this and would like to see this feature available for my store.
Military Simulation at its best!
www.kastwayairsoft.com
Cliff
#5 Posted : Saturday, February 2, 2008 3:41:46 PM(UTC)
Cliff

Rank: Member

Joined: 5/24/2004(UTC)
Posts: 4,147
You'll generally have to use javascript for IE support, since IE doesn't understand the :hover pseudo class on anything but links, and ULs are nested in LIs, not links.

Here's an example based on suckerfish, which primarily uses CSS but includes some javascript to add a class for hovering in IE. It's quick and dirty, and will probably require some tweaking and testing. Mostly because I don't find drop-down menus to be a very good idea in most cases, so I'm not putting much time into this:

Code:
h4 { clear: both; } /* You'll want to find a better way to clear these floats */
.categorymenu, .categorymenu .decoratedblock { float: left; width: 100%; padding: 0; }
.categorymenu ul { padding: 0; margin: 0; list-style: none; float : left; width : 18em; }
.categorymenu ul li { position: relative; float: left; line-height: 1.5em; margin: 0 0 -1px 0; padding: 0; width: 18em; }
.categorymenu ul li ul { position: absolute; left: -999em; margin: -1.5em 0 0 18.05em; background: #fff; border: 1px solid #222; }
.categorymenu ul li ul ul { left: -999em; }
.categorymenu ul li a { width: 18em; w\idth : 17em; display: block; color: black; font-weight: bold; text-decoration: none; padding: 0 0.5em; }
.categorymenu ul li a:hover { color: white; background-color: black; }
.categorymenu ul li:hover ul ul,
.categorymenu ul li:hover ul ul ul,
.categorymenu ul li.sfhover ul ul,
.categorymenu ul li.sfhover ul ul ul { left: -999em; }
.categorymenu ul li:hover ul,
.categorymenu ul li li:hover ul,
.categorymenu ul li li li:hover ul,
.categorymenu ul li.sfhover ul,
.categorymenu ul li li.sfhover ul,
.categorymenu ul li li li.sfhover ul { left: auto; }


The above will probably depend on things inherited in your theme - widths, font sizes, and the rest - but should offer a relatively decent starting point. You'll need to modify the javascript found at http://www.htmldog.com/articles/suckerfish/dropdowns/ to work with the BV structure (i.e., using the #homepagecolumn1 instead of #nav, or modifying the menu to use an ID).
casti004
#6 Posted : Monday, February 4, 2008 8:33:12 PM(UTC)
casti004

Rank: Member

Joined: 1/18/2008(UTC)
Posts: 50
Hello Cliff,

Thank you for your input, I'll try to integrate this and share my code. This would be awsume since it would be fully integrated as a category menu.


So far, I've semi-sucessfully gotten a customized css-only example working (off of the web), but it is not fully functional and it is static coded, which isn't ideal.
I have it running on a site I am developing:

http://uniquebanners.net


I think this works in IE (but not certain) and it has the following problem in all browsers I've tested:

When you navigate to a subcategory, the box floats underneath any item/picture that has an <a> tag in the column2 content section.

This is a lot harder than I first thought, and know what you mean about it not being a good idea.

Any ideas about this? Sorry for the headache, my client really wants this function.

Dave



my code:


/* common styling */
.menu {font-family: arial, sans-serif; width:190px; height:150px; margin:0; font-size:11px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:165px; height:20px; border:1px solid #fff; border-width:1px 1px 0 0; background: transparent url(../images/NavBG2.gif); line-height:19px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background: transparent url(../images/NavBG2Hover.gif);}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:201px; width:105px;}
.menu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover a.hide {width:150px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#000; width:150px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:186px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
casti004
#7 Posted : Monday, February 4, 2008 10:22:23 PM(UTC)
casti004

Rank: Member

Joined: 1/18/2008(UTC)
Posts: 50
To shed more light on this, I put an image rotator just underneath the category rotator and it works fine.
Take a look:

http://www.uniquebannersonline.com/


This is strange, my guess is that it has something to do with the !important tag??
I am using the Tek GearII template and I can't find any coding for the class : <div class="categoryrotator"> in the style sheet.

Anyways, I'll work on Cliff's idea, and submit my code.

regards,

dave
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.

Powered by YAF | YAF © 2003-2024, Yet Another Forum.NET
©2024 Develisys. All rights reserved.
  • Toll-free  888-665-8637
  • International  +1 717-220-0012