View Full Version : Smooth Navigational Menu Help!

11-13-2010, 10:30 PM
1) Script Title: Smooth Navigational Menu (v1.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

3) Describe problem: I have placed the scripts into my website which I have put together with Goldfish, which will hopefully replace what I originally had done through the basic Goldfish menu creation settings. I was really hoping I could change the way the menu displays to be more in line with what originally have through Goldfish, but with the smooth fading effect. Is this a cheeky request?

I'm a complete noobice with HTML coding (which is why I'm using Goldfish) but have managed to make some of the changes I need to a point. I was maybe thinking I could (as an 'easier' alternative) add some code to the original Goldfish pre-rendered menu display to make it seem a bit less tacky.

font: bold 14px Calibri;
background: transparent; /*background of menu bar (default state)*/
width: 100%;

.ddsmoothmenu ul{
margin: 0;
padding: 0;
list-style-type: none;

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #0000000; /*background of menu items (default state)*/
color: black;
padding: 8px 10px;
border-right: 0px solid #778;
color: #0000000;
text-decoration: none;

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: black;

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: black;

.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: black;

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 14px Calibri;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 0px solid gray;

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images ######### */

position: absolute;
top: 12px;
right: 7px;

position: absolute;
top: 6px;
right: 5px;

/* ######### CSS for shadow added to sub menus ######### */

position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;

The pics attached are:

22.38: The menu in Goldfish. The black area just appears.
22.37 1: The slide show. I want the top tier of the menu to stay white, with no black and the sub menu and sub sub menu to be black. All need the text to bold when mouse it rolled over.

Does this make any sense at all?