CSS Dropdown menu for the header- With Categories!

Well, I got it working but this seems to cause the page to seize and nothing below this code will work. Ths is the code in tpl_expages_drop_menu:

$content = "";$content .="\n";for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {$content .= ' <li><a href="' . $var_linksList[$i]['link'] . '">' . $var_linksList[$i]['name'] . '</a></li>'

So when I have this enabled, there is no page below the menu.

Thanks for any advice.

makenoiz are you sure that the file is tpl_expages_drop_menu as I can't seem to locate it?

I do find, tpl_ezpages_drop_menu

If that is the file you mean then change

$content = "";$content .="\n";for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {$content .= ' <li><a href="' . $var_linksList[$i]['link'] . '">' . $var_linksList[$i]['name'] . '</a></li>'

to

$content = "";$content .="\n";for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {$content .= ' <li><a href="' . $var_linksList[$i]['link'] . '">' . $var_linksList[$i]['name'] . '</a></li>' . "\n" ;} // end FOR loop

Can someone post the code to add a space between the flyout menu and main body.

The mod installed without any problems, but I seem to have an issue with the spacing.

Take a look at my site, and you'll notice how tight the menu header is to the category box on the left, as well as the search box on the right.

How do I add a space in between?
Posted via Mobile Device

Sorry, forgot to add the site.

indigodecorativeDOTcom
Posted via Mobile Device

It's in the CSS, the stylesheet_header_menu.css
Look for this, and change the width to what ever you wish 90% look good on mine.

div#dropMenu {
width:100%;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

When I add this mod it doesn't display the page below the new menu bar.

I have checked double checked and triple checked all the files and they all exsist. I also uploaded all of these using filezilla so they should have all been uploaded straight away.

Any ideas?

Hi Guys

I am looking at trying to change the horizontal fly out menu to look a different way, what i am trying to accomplish can be seen on littlewoods.com there drop down menu shows two level of categories in the horizontal flyout menu with the main category in bold and the subcategory in standard text all shown in columns.

Any ideas what can be done to accomplish this i presume the majority will be in the stylesheet with the line spacing and padding settings but i would need to know what code to change in the main template files or the generator to make the layout appear in this way.

Thanks
Brad

Hi Guys

Managed to do this with just the style sheet i am not 100% sure on the code for the stylesheet but here is the section i have changed.

div#dropMenu ul.level1 li.submenu:hover ul.level2 {background-color:none;margin-left:-15em;font-family:Arial, Helvetica, sans-serif; font-weight:100;color:#999999;font-size:12px;display:block;z-index:1000;width:450px;filter: alpha(opacity = 90);-moz-opacity:0.90;}
div#dropMenu ul.level2 li.submenu ul.level3 {background:none;text-align:left;font-size:10px;position:relative;display:list-item;}

Hope this helps others.

Thanks
Brad

Still can't get this mod to work it is deleting everything after it - any ideas?

websightdesign:

Hi Guys

Managed to do this with just the style sheet i am not 100% sure on the code for the stylesheet but here is the section i have changed.

div#dropMenu ul.level1 li.submenu:hover ul.level2 {background-color:none;margin-left:-15em;font-family:Arial, Helvetica, sans-serif; font-weight:100;color:#999999;font-size:12px;display:block;z-index:1000;width:450px;filter: alpha(opacity = 90);-moz-opacity:0.90;}
div#dropMenu ul.level2 li.submenu ul.level3 {background:none;text-align:left;font-size:10px;position:relative;display:list-item;}

Hope this helps others.

Thanks
Brad

I would like to see your site...

I have been struggling with my top level categories.

Thanks, Kim

I am struggling wiht this mod, can anyone install it for me if i pay them? Thank You..

Hi,

I simply installed the code in the readme file (<!--bof-drop down menu display-->

NOTE: I am also using the Alternate Header v2.0 and added the above code to the bottom of the tpl_header.php file contained in that addon. No other code mods other than that.

In addition to that, I would like to know if it is possible to replace "Home", "Categories" and "Information" with my top-level categories and then having my sub level categories flyout.

Instructions and the necessary code (if needed) is truly appreciated.

I have been stuggling for several days and have looked thru forum. My issues seem to be css related. :frusty:Need any help I can get with...

*categories are going vertical instead of horizonal across dropMenu bar
Here is css.

div#dropMenu {
position:relative;
width: 100%;
height:25px;
margin: 0em;
margin-top: 1px;
padding: 0em;
text-align:center;
z-index: 1000;
border-bottom: 2px solid #083562;
font-family: Lucida Sans;
float: center;
}

*space between dropmenu and logo/wrapper
Not sure where to change this. I have modified logo, wrapper and MenuWrapper with no luck.

Thanks, Kim

kburner:

I have been stuggling for several days and have looked thru forum. My issues seem to be css related. :frusty:Need any help I can get with...

*categories are going vertical instead of horizonal across dropMenu bar
Here is css.

div#dropMenu {
position:relative;
width: 100%;
height:25px;
margin: 0em;
margin-top: 1px;
padding: 0em;
text-align:center;
z-index: 1000;
border-bottom: 2px solid #083562;
font-family: Lucida Sans;
float: center;
}

*space between dropmenu and logo/wrapper
Not sure where to change this. I have modified logo, wrapper and MenuWrapper with no luck.

Thanks, Kim

*categories are going vertical instead of horizonal across dropMenu bar
Got this figured out...not sure what I did.
But I have 13 categories and can not get them to all fit. Caps are small - so they should fit....Any one know how to get them all across??

*space between dropmenu and logo/wrapper
Still have space in FF, but gone from IE...

Added to stylesheet:

.clearBoth {
clear:both;
height: 2.5px;
font-size:0;
line-height: 0;
}

Kim

kburner:

*categories are going vertical instead of horizonal across dropMenu bar
Got this figured out...not sure what I did.
But I have 13 categories and can not get them to all fit. Caps are small - so they should fit....Any one know how to get them all across??

*space between dropmenu and logo/wrapper
Still have space in FF, but gone from IE...

Added to stylesheet:

.clearBoth {
clear:both;
height: 2.5px;
font-size:0;
line-height: 0;
}

Kim

I am still struggling with css with this mod. I love it - but can not get it to work. I have been going thru large forum looking for answers.

***I have 13 categories - how do I get them to fit?? I have hidden at this time because it causes them to go to next line.

***Extra space above categories in FF but not IE.

Please help! :frusty::frusty:

Thanks, Kim

Ok ive looked through a LOT of posts, but i havent really found what i was looking for, so im gonna take the chance and ask a question, that hopefully havent been answered yet. If so...i apologize :)

I know that the ez pages are connected to the information box, but is there a way to add pages/links to the other categories?

Ex.....i would like to add a facebook link as a drop down under the "Contact us" category, and i would like to add an extra page to the "my account" category.

How do i go about doing that?
Im not a techie, so any help is appreciated :blush:

kburner:

I am still struggling with css with this mod. I love it - but can not get it to work. I have been going thru large forum looking for answers.

***I have 13 categories - how do I get them to fit?? I have hidden at this time because it causes them to go to next line.

***Extra space above categories in FF but not IE.

Please help! :frusty::frusty:

Thanks, Kim

Any one??

znowflake:

Ok ive looked through a LOT of posts, but i havent really found what i was looking for, so im gonna take the chance and ask a question, that hopefully havent been answered yet. If so...i apologize :)

I know that the ez pages are connected to the information box, but is there a way to add pages/links to the other categories?

Ex.....i would like to add a facebook link as a drop down under the "Contact us" category, and i would like to add an extra page to the "my account" category.

How do i go about doing that?
Im not a techie, so any help is appreciated :blush:

Nm. I figured out myself :)

1.Make a link <li><a href="http://www.link_here">Link_name_here</a></li>
2. Add it to your tpl_drop_menu where you want it.
Remember to add <ul class="level2"> (to make it a dropdown) before your link and </ul>(to seperate from next menu) after.

To add an extra page somewhere else but your Information menu, simply use your ez pages, but without adding it to the header and do the same as above.

Voila.

It works for me :)

Been working very hard to get this to work! Almost there...

***I have 13 categories - how do I get them to fit?? I have hidden at this time because it causes them to go to next line.
Finally got all 13 to fit---used
#divdropMenu li

div#dropMenu li {
position:relative;
list-style:none;
margin:0;
margin-left: .5px;
float: left;
line-height:1em;
width: 7.6%;
text-align:center;
}

***Extra space above categories in FF but not IE.
Now works in FF but not IE... This is what code looks like.

div#dropMenu {
position:relative;
width: 100%;
height: 25px;
margin-top: -10.99px;
margin-bottom: .19px;
text-align:center;
z-index: 1000;
font-family: Lucida Sans;
}

Any suggestions on how to get IE to work?

Thanks, Kim

kburner:

Been working very hard to get this to work! Almost there...

***I have 13 categories - how do I get them to fit?? I have hidden at this time because it causes them to go to next line.
Finally got all 13 to fit---used
#divdropMenu li

div#dropMenu li {
position:relative;
list-style:none;
margin:0;
margin-left: .5px;
float: left;
line-height:1em;
width: 7.6%;
text-align:center;
}

***Extra space above categories in FF but not IE.
Now works in FF but not IE... This is what code looks like.

div#dropMenu {
position:relative;
width: 100%;
height: 25px;
margin-top: -10.99px;
margin-bottom: .19px;
text-align:center;
z-index: 1000;
font-family: Lucida Sans;
}

Any suggestions on how to get IE to work?

Thanks, Kim

See how in my original file, I have two width's for div#dropMenu li, and the second one starts with a *? That asterisk one is for IE only:

div#dropMenu li {
	position:relative;
	list-style:none; 
	margin:0; 
	float:left; 
	line-height:1em;
	width:16.667%;
	*width:16.649%;
	}

So you need to add *width:7.5;

to your div #dropMenu li. Or something like that, basically IE needs a slightly smaller percentage.