PDA

View Full Version : Smooth Menu UL Nesting Problem



lmw1
04-20-2010, 10:25 PM
I've "almost" got my menu set-up, but I'm having a little problem on coding the nested UL's & LI's. Please see attached image of what I want. Also have a look at my code, am I forgetting to close or add a tag somewhere?

**I'm only concerned with the "Folder 2" menu option in the code below. It should appear as a "2 level fly-out menu when drilled down". Ex; Main menu name=Folder 2 - which opens up a drop down menu, and when you scroll over the items there, a fly out menu appears with menu options. That's all it needs to do.

url: www dot american webmakers dot com / eagle / practice dot html

Thanks in advance!

<div id="menu" class="ddsmoothmenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Clinic Info</a>
<ul>
<li><a href="#">Location</a></li>
<li><a href="#">Hours</a></li>
<li><a href="#">Facility</a></li>
<li><a href="#">Appointments</a></li>
<li><a href="#">New Patients</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Vision Exams</a></li>
<li><a href="#">Contact Lenses</a></li>
<li><a href="#">Laser Surgery</a></li>
<li><a href="#">Vision Therapy</a></li>
</ul>
</li>
<li><a href="doctors.html">Doctors</a></li>

<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a></li>
</ul>
</li>
</ul>

<li><a href="#">Info Center</a>
<ul>
<li><a href="#">Glaucoma</a></li>
<li><a href="#">Allergies</a></li>
<li><a href="#">Dry Eyes</a></li>
<li><a href="#">Macular Degeneration</a></li>
<li><a href="#">Cataracts</a></li>
<li><a href="#">Childrens Vision</a></li>
<li><a href="#">Lasik Info</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>


Respectfully,
Len

BLiZZaRD
04-21-2010, 12:29 AM
Looks like:



<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a></li>
</ul>
</li>
</ul>


is your problem... the last three.. ul li ul are out of order. make it /ul /ul /li like this:



<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a></li>
</ul>
</ul>
</li>


Not sure if that is the fix, but that's what jumps out at me.

lmw1
04-21-2010, 01:35 AM
Hey Blizzard! Thanks for the help. Unfortunately, that part of my menu is still not working correctly. I know it's got something to do with the nesting issue though.

Do you think you can go to the page and look at the source code just for the menu item entitled "Products" and see what is happening? The menu item isn't behaving.

Here's the link: http://www.americanwebmakers.com/eagle/practice.html

Hope to hear from you soon.

Respectfully,
Len

BLiZZaRD
04-21-2010, 01:51 AM
Okay, had a look. I don't have time to install and test on my server so I am going by appearances. May be a trial and error here if I missed something. Try this:



<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Clinic Info</a>
<ul>
<li><a href="#">Location</a></li>
<li><a href="#">Hours</a></li>
<li><a href="#">Facility</a></li>
<li><a href="#">Appointments</a></li>
<li><a href="#">New Patients</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Vision Exams</a></li>
<li><a href="#">Contact Lenses</a></li>
<li><a href="#">Laser Surgery</a></li>
<li><a href="#">Vision Therapy</a></li>
</ul>
</li>
<li><a href="doctors.html">Doctors</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Contacts</a></li>
<li><a href="#">Glasses</a></li>
<li><a href="#">Laser</a>
<ul>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Soft Lenses</a></li>
<li><a href="#">Ridgid Lenses</a></li>
<li><a href="#">CRT Lenses</a></li>
<li><a href="#">Bifocal Lenses</a></li>
<li><a href="#">Specialty Lenses</a>
<ul>
<li><a href="#">Frames</a></li>
<li><a href="#">Lens Features</a></li>
<li><a href="#">Sunglasses</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Types of Surgery</a></li>
<li><a href="#">Lasik FAQ's</a></li>
<li><a href="#">Fee Information</a></li>
</ul>
</li>
<li><a href="#">Info Center</a>
<ul>
<li><a href="#">Glaucoma</a></li>
<li><a href="#">Allergies</a></li>
<li><a href="#">Dry Eyes</a></li>
<li><a href="#">Macular Degeneration</a></li>
<li><a href="#">Cataracts</a></li>
<li><a href="#">Childrens Vision</a></li>
<li><a href="#">Lasik Info</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>


Skeptical of one place in here, but everything above is now closed correctly. Copy and paste over what you have now and have a look. Should be good.

lmw1
04-21-2010, 02:16 AM
Still isn't working right. Hmmmmm?

Here, I made a simple graphic to show you what it "should" be doing. I think you'll get a clearer understanding.

I hope anyways. lol I'm running behind on this job due to this menu issue. Aaaarrrggghhh!

Thanks for helping me Blizzard!!!! I truly appreciate it!

Respectfully,
Len

BLiZZaRD
04-21-2010, 02:22 AM
hmm.. clearer now.

Try this one:



<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Clinic Info</a>
<ul>
<li><a href="#">Location</a></li>
<li><a href="#">Hours</a></li>
<li><a href="#">Facility</a></li>
<li><a href="#">Appointments</a></li>
<li><a href="#">New Patients</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Vision Exams</a></li>
<li><a href="#">Contact Lenses</a></li>
<li><a href="#">Laser Surgery</a></li>
<li><a href="#">Vision Therapy</a></li>
</ul>
</li>
<li><a href="doctors.html">Doctors</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Contacts</a>
<ul>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Soft Lenses</a></li>
<li><a href="#">Ridgid Lenses</a></li>
<li><a href="#">CRT Lenses</a></li>
<li><a href="#">Bifocal Lenses</a></li>
<li><a href="#">Specialty Lenses</a></li>
</ul>
</li>
<li><a href="#">Glasses</a>
<ul>
<li><a href="#">Frames</a></li>
<li><a href="#">Lens Features</a></li>
<li><a href="#">Sunglasses</a></li>
</ul>
</li>
<li><a href="#">Laser</a>
<ul>
<li><a href="#">Types of Surgery</a></li>
<li><a href="#">Lasik FAQ's</a></li>
<li><a href="#">Fee Information</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Info Center</a>
<ul>
<li><a href="#">Glaucoma</a></li>
<li><a href="#">Allergies</a></li>
<li><a href="#">Dry Eyes</a></li>
<li><a href="#">Macular Degeneration</a></li>
<li><a href="#">Cataracts</a></li>
<li><a href="#">Childrens Vision</a></li>
<li><a href="#">Lasik Info</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>

lmw1
04-21-2010, 02:34 AM
It worked!!!! Yay!

One little problem though...there should be a little arrow to the right of the category on the first drop-down which indicate there's sub-categories. It's there for the first one (Contacts), but it's not there for the other 2 under it. The menus work fine now though.

Any ideas?

Thanks for your help Blizzard!

Respectfully,
Len

BLiZZaRD
04-21-2010, 06:24 PM
I had a look, and it is something in the ddsmoothmenu.js I am not sure what, but it appears that there is something stripping the class (in this case: class="right") to show or not show the arrow.

Someone with JS knowledge will need to help out here. Maybe John will pop in and be able to help.

lmw1
04-21-2010, 11:30 PM
Blizzard,

Thank you for your help! You fixed it perfectly! I have taken your advice and started a post in regard to the "little arrows" issue in the Javascript section of the forums.

Hopefully someone will help. I'll let you know the results.

Respectfully,
Len