SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    menu not working as desired

    Hi,
    i m new to jquery and creating menu, the menu drop down menu stays under one position i,e the first menu and don't drop under their own respesctive paren't menu and its not taking with to be of decent equal size.what am i doing wrong?
    All those who wander aren't lost.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    How do you want the menu to appear? At the moment, you have one link above the other.

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, now its on top of each other and every sub menu slides down from position of home.i want them to slide in there respective order i.e below there own parent. also i want them be with wise equally.so they look decent and not wrap around just for text
    All those who wander aren't lost.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    The CSS is targeting an UL inside an element called "menubar", so that's why nothing is working. So, firstly, update your HTML to something like this:

    Code:
               <div class="menubar">
                            <ul>
                                <li class="dropdown"><a href="index.php">Home</a>
                                </li>
                                <li class="dropdown"><a href="about.php">About</a>
                                    <ul class="sublinks">
                                    <li><a href="">History</a></li>
                                    <li><a href="">Mission + Vision</a></li>
                                    <li><a href="">Objectives</a></li>
                                    <li><a href="">Afflitaion</a></li>
                                    <li><a href="">Facilities</a></li>
                                    <li><a href="">Staff</a></li>
                                    <li><a href="">Contact Us</a></li>
                                    </ul>
                                </li>
                            </ul>
                         </div>
    Also make sure that jQuery 1.8 is selected on the left, as it is defaulting to Mootools.

    Also, in your CSS, change

    Code:
    .menubar ul li{display: inline;}
    to

    Code:
    .menubar ul li{float: left;}

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    thanks, meanwhile i tried that.there is a issue..
    1.the drop down overlap parent menu. i need i open a little below.
    2.the li background are wrapping to what the size of text is, i want to them to be of decent width, so every menu is equal
    3. somehow its pulling/inheriting the parent menu style.
    All those who wander aren't lost.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Please update the Fiddle page or post a link to a new one.

  7. #7
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    here...
    p.s if u can delete the above mentioned menu code.kindly do that..the code is private.
    All those who wander aren't lost.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nofel View Post
    here...
    You haven't used any of my suggestions above. I tested them and they work.

  9. #9
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I was able to do. what was needed. however its so confusing about which element to style(li or a) to give padding.so its fat thick button type rollover
    All those who wander aren't lost.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    O well, first things first. There's no point worrying about padding until you've got the basics right. Use the HTML and CSS I posted above. Your HTML is invalid and incomplete at the moment.


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
  •