Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    108
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Drop-UP Navigation Menu?

    Hey Guys,

    I'm working on a site that uses a dropdown menu in its main navigation across the top of the page. Implementing it was no problem.

    However, I'd like to have a similar effect in the footer - except instead of the menu dropping downwards (and off the page) I'd like it to slide upwards. Each item contains different amounts of li's and therefor is different in length.

    Any idea how to go about doing this?

    Thanks.

    Here's the menu itself:
    Code:
        <div id="footer">
            <!-- Drop down navigation -->
            <div id="navigation">
    		<ul>
                	<li><a class="home"></a></li>
                    
                	<li><a class="resources"></a>
                    	<ul>
                        	<li><a href="#">Current Message</a></li>
                            <li><a href="#">Message Archive</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Contact Us</a></li>
                            <li><a href="#">Prayer Request</a></li>
                            <li><a href="#">Newsletters</a></li>
                            <li><a href="#">Weekly Bulletin</a></li>
                            <li><a href="#">Links &amp; Apps</a></li>
    			</ul>
    		</li>
    
                	<li><a class="giving"></a></li>
    
                	<li><a class="events"></a>
                    	<ul>
                        	<li><a href="#">Upcoming Events</a></li>
                            <li><a href="#">Event Photos</a></li>
                            <li><a href="#">Event Registration</a></li>
                            <li><a href="#">Event FAQ</a></li>
    			</ul>
    		</li>
    
                	<li><a class="grow"></a>
                    	<ul>
                        	<li><a href="#">Journey Groups</a></li>
                            <li><a href="#">Connect</a></li>
                            <li><a href="#">Serve</a></li>
                            <li><a href="#">Prayer Requests</a></li>
    			</ul>
    		</li>
    
                	<li><a class="closer_look"></a>
                    	<ul>
                        	<li><a href="#">What to Expect</a></li>
                            <li><a href="#">Worship</a></li>
                            <li><a href="#">Share</a></li>
                            <li><a href="#">Our Pastor</a></li>
                            <li><a href="#">Our Staff</a></li>
                            <li><a href="#">Get Directions</a></li>
    			</ul>
    		</li>
    	        </ul>
            </div><!-- End navigation -->
        </div><!-- End Footer -->
    And here's the basic css:
    Code:
    #navigation ul { float:right; margin:0; padding:0 50px 0 0; list-style-type:none; text-align:center; }
    #navigation ul li { display:inline-block; padding:0; position:relative; margin:0 5px; float:right; }
    #navigation ul li a { display:block; height:42px; }
    #navigation ul li h3 { line-height:1em; margin:20px 0 0 0; }
    #navigation ul li ul { position:absolute; z-index:10; display:none; background:none; margin:0; padding:0; float:left; }
    #navigation ul li:hover ul { display: block; }
    #navigation ul li ul li { z-index:10; position:relative; display:block; text-align:left; margin:0 0 0 -30px; }
    #navigation ul li ul li a { display:block; height:20px; width:125px; background:#fff; padding:5px 30px 5px 30px; background:url('images/header_nav_dropbg.png'); }
    #navigation ul li ul li a:hover { border-bottom:solid thin #78A22F; border-top:solid thin #78A22F; text-decoration:none; margin:-2px 0 0; padding:6px 30px 4px 30px; color:#333; }
    /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; }
    
    /* Mouseover Effects */
    #navigation ul li a.closer_look { background:url('images/nav_closerlook.png'); width:118px; } #navigation ul li a.closer_look:hover { background:url('images/nav_closerlook_over.png'); }
    #navigation ul li a.grow { background:url('images/nav_grow.png'); width:58px; } #navigation ul li a.grow:hover { background:url('images/nav_grow_over.png'); }
    #navigation ul li a.events { background:url('images/nav_events.png'); width:74px; } #navigation ul li a.events:hover { background:url('images/nav_events_over.png'); }
    #navigation ul li a.giving { background:url('images/nav_giving.png'); width:74px; } #navigation ul li a.giving:hover { background:url('images/nav_giving_over.png'); }
    #navigation ul li a.resources { background:url('images/nav_resources.png'); width:103px; } #navigation ul li a.resources:hover { background:url('images/nav_resources_over.png'); }

  • #2
    Senior Coder Len Whistler's Avatar
    Join Date
    Jul 2002
    Location
    Vancouver, BC Canada
    Posts
    1,323
    Thanks
    26
    Thanked 100 Times in 100 Posts
    Position the drop down menu in a footer division at the bottom.



    -----
    Leonard Whistler

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Are you building the pages server-side? what you may be able to do (I am thinking on the hoof), is to make sure that each flyout has the same number of li's even if some are blank. then, you could position the flyout parts absolutely, to be the same distance above the parent LI and they would look like they run up from it. OR, perhaps, you could give each sub LI a class and give each class a specific absolute position to try to achive the same effect.

    hth

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #navigation ul li ul { position:absolute; z-index:10; display:none; 
    background:none; margin:0; padding:0; float:none; bottom:2em; }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    CSSQuest (05-06-2010)

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Posts
    108
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Thanks abduraooft, that works for me. Ended up having to tweak its positioning etc but overall - great fix.


  •  

    Posting Permissions

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