CSS Codes
CSS Layouts
Results 1 to 9 of 9

Thread: Smooth Menu UL Nesting Problem

  1. 04-20-2010, 10:25 PM #1
    lmw1
    lmw1 is offline Junior Coders
    Join Date
    Apr 2010
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Smooth Menu UL Nesting Problem

    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
    Last edited by lmw1; 04-20-2010 at 10:35 PM.
    Reply With Quote Reply With Quote
  2. 04-21-2010, 12:29 AM #2
    BLiZZaRD's Avatar
    BLiZZaRD
    BLiZZaRD is offline Elite Coders
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Looks like:

    Code:
    <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:

    Code:
    <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.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result = mysql_query("SELECT finger FROM hand WHERE id=3");
    echo     $result; 
    Reply With Quote Reply With Quote

  3. The Following User Says Thank You to BLiZZaRD For This Useful Post:

    lmw1 (04-21-2010)
  4. 04-21-2010, 01:35 AM #3
    lmw1
    lmw1 is offline Junior Coders
    Join Date
    Apr 2010
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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
    Reply With Quote Reply With Quote
  5. 04-21-2010, 01:51 AM #4
    BLiZZaRD's Avatar
    BLiZZaRD
    BLiZZaRD is offline Elite Coders
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    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:

    Code:
    	<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.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result = mysql_query("SELECT finger FROM hand WHERE id=3");
    echo     $result; 
    Reply With Quote Reply With Quote

  6. The Following User Says Thank You to BLiZZaRD For This Useful Post:

    lmw1 (04-21-2010)
  7. 04-21-2010, 02:16 AM #5
    lmw1
    lmw1 is offline Junior Coders
    Join Date
    Apr 2010
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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
    Reply With Quote Reply With Quote
  8. 04-21-2010, 02:22 AM #6
    BLiZZaRD's Avatar
    BLiZZaRD
    BLiZZaRD is offline Elite Coders
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    hmm.. clearer now.

    Try this one:

    Code:
    	<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>
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result = mysql_query("SELECT finger FROM hand WHERE id=3");
    echo     $result; 
    Reply With Quote Reply With Quote

  9. The Following User Says Thank You to BLiZZaRD For This Useful Post:

    lmw1 (04-21-2010)
  10. 04-21-2010, 02:34 AM #7
    lmw1
    lmw1 is offline Junior Coders
    Join Date
    Apr 2010
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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
    Reply With Quote Reply With Quote
  11. 04-21-2010, 06:24 PM #8
    BLiZZaRD's Avatar
    BLiZZaRD
    BLiZZaRD is offline Elite Coders
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    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.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result = mysql_query("SELECT finger FROM hand WHERE id=3");
    echo     $result; 
    Reply With Quote Reply With Quote

  12. The Following User Says Thank You to BLiZZaRD For This Useful Post:

    lmw1 (04-21-2010)
  13. 04-21-2010, 11:30 PM #9
    lmw1
    lmw1 is offline Junior Coders
    Join Date
    Apr 2010
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules