Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Dropdown Menu - hm_menu.php


rqualls

Recommended Posts

I would like to code dropdown menu selections for my main menu. I have coded before with other HTML websites, but wandering if possible with OSC2.3.1. It appears because of the Application_Top or Header Section height that the dropdown won't continue over the top of the main content section. That's why I am wandering if it's even possible using CSS settings.

 

THanks,

RQ

Link to comment
Share on other sites

Hi George, sorry would help wouldn't it

 

Below is the link I did the drop down menu in

 

http://www.webdesignerwall.com/demo/css3-dropdown-menu/

 

I then put the links into the filenames.php in the includes folder, see example below

 

define('FILENAME_ALL', 'http://dressingup4fun.com/index.php/cPath/156');

 

I then put this in the header.php directly under <div class="grid_24 ui-widget infoBoxContainer">

 

 

<ul id="nav" class="ui-corner-all">

<li class="current"><a href="<?php echo tep_href_link(FILENAME_DEFAULT); ?>">Home</a></li>

<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . '156') . '">' . 'All Costumes' . '</a>' ;?>

 

 

<ul>

<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . '156_157') . '">' . 'Boys Costumes' . '</a>' ;?></li>

<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . '156_158') . '">' . 'Girls Costumes' . '</a>' ;?></li>

<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . '156_60') . '">' . 'Womens Costumes' . '</a>' ;?></li>

<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . '156_153') . '">' . 'Mens Costumes' . '</a>' ;?></li>

<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . '156_160') . '">' . 'Boy & Girl Couple Costumes' . '</a>' ;?></li>

<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . '156_159') . '">' . 'Men & Womens Couple Costumes' . '</a>' ;?></li>

</ul>

</li>

</ul>

 

Then get the styles from the webdesignerwall.com link at the start

 

The menu work's perfect on the website store I coded it in on

 

Hope that helps, if not message back and will gladly help out more

Link to comment
Share on other sites

Ian, thanks for the link to webdesignerwall, very helpful. I am not sure what's going on with the links in filenames.php as you indicated below though. Meaning why that's needed.

 

Thanks

 

I then put the links into the filenames.php in the includes folder, see example below

 

define('FILENAME_ALL', 'http://dressingup4fun.com/index.php/cPath/156');

 

I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Link to comment
Share on other sites

Hi Steve

 

No problem any time

 

I think by putting the links in the filenames.php is the correct way to do it and then where is says the following

 

<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . '156_159') . '">' . 'Men & Womens Couple Costumes' . '</a>' ;?></li>

 

Change the DEFAULT TO ALL or whatever you call it in the filenames.php

Link to comment
Share on other sites

Thank you for the help. I had coded the <ul><li> the same, but I think my problem was in the stylesheet. The dropdown would appear but not completely because of the menu block height and it was not continuing on over the top of the content section. I will look at your solution and surely get it working properly now. Keep you posted.

Thanks again,

RQ

Link to comment
Share on other sites

Attached is a screen shot of my dropdown menu attempt. I am on release 2.3.1 and I have coded the dropdown in the hm_menu.php block. The problem still is that the dropdown will not open up past the bottom of the Header section and into the content area. The example picture only shows one item, when actually there are 5 sub menu items.

 

Thanks for any additional help. I am sure it's a CSS thing.

post-320210-0-38725200-1366765043_thumb.jpg

Link to comment
Share on other sites

Hi Ronnie

 

Look at what John mentioned, being the z-index on the menu, might need to use the position: style as well in the css, would that be right John?

Link to comment
Share on other sites

Hows your overflow on the contianer holding the menu?

May try :

overflow: visible !important;

 

All I can figure from the image, aside from the z-index, which aparantly is set ok.

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

I will include my CSS code tonight when I get home... I have tried changing the overflow which looks to be the culprit, but that dorks up the menu worse with scroll bars etc... The dropdown works ok if I enlarge the height of the header, so it's just a case of not overflowing over the content container.

 

I tried overflow:visible in a couple different places, but no luck... Even tried overflow:auto... The current code does have "hidden" in a few places...

 

Will post more tonight... Thanks

Link to comment
Share on other sites

Hi Ronnie,

 

If you can post a link to the site in question it would be easier to help!!

 

Regards

Joli

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

Here is the link to my work in progress. As you can see, the dropdown menu for Solutions and Services does not go below the bottom of the header. Also, is the hacked up CSS I am using... Thanks for any help..

 

http://s451102245.onlinehome.us/catalog/index.php

 

stylesheet.css

/* ************************************************************************************* */

.boxes_menu {overflow:hidden;margin: 0px 0px 0px 0px;background:url('../images/boxes_menu_bg.gif') 0px 0px repeat-x transparent;}

.menu { float:left;}

.menu ul {padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px; list-style:none; overflow:hidden;}

.menu li {float:left; position:relative;background:url('../images/menu_item.gif') no-repeat transparent; font-size:.915em;}

.menu li a {display:inline-block;padding: 11px 20px 13px 20px;}

.menu li a span { display:inline;}/**/

.menu li a {color:#fff; font-weight:bold; text-decoration:none; text-transform:uppercase;}

.menu li.act a span,

.menu li:hover a span {color:#fff; text-decoration:underline;display:inline-block;padding: 0px 0px 0px 0px;}

.menu li.act a,

.menu li:hover a {text-decoration:none;}

.menu li.first { background:none;}

/* ************************************************************************************* */

/* **** Dropdown Menu - ************************************************** */

/* ************************************************************************************* */

.menu li li a:link, .menu li li a:visited{

 

float:left;

margin-top:5px;

margin-left:20px;

padding: 0px 0px;

font-size:10px;

font-weight:normal;

color:#000;

 

}

.menu li ul{

background:url('../images/boxes_menu_bg.gif') 0px 0px repeat-x transparent;

z-index:9999;

position:absolute;

left:999em;

color:#000;

height:270px;

width:110px;

}

 

.menu li ul a {

 

border-bottom:0px solid #333;

}

 

.menu ul li ul li a {

font-weight:bold;

}

 

.menu ul li ul li a:hover {

font-weight:bold;

}

.menu li ul li{

width:70px;

border-bottom:0px solid #333;

}

.menu li:hover ul ul{

/* left:-999em; */

font-weight:bold;

}

.menu li:hover ul, .menu li li:hover ul{left:auto;}

.menu li:hover{position:static;}

.menu li.last a{margin-right:0;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...