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 3 of 3

Thread: Sliding menu

  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    57
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question Sliding menu

    I'm trying to make this menu go up and down when the arrows are clicked. Right now, it shows all of them and I can't figure out how to make it so that it only shows the first 9 and will show the rest in the menu when it's clicked.

    I really don't know where to start. I found some scripts but they turned out really funky. Even if it's something super simple is cool, just where to begin??

    Here is the menu:
    Code:
    <div class="arrow_holder"><span onclick="document.getElementById('down').display = 'none'; document.getElementById('up').display = 'block';" ><img src="images/arrow-up.png" alt="" border="0" /></span></div>
          
    //video1	
    <div class="portfolio_details" onclick="change_video(1);">
                    <div class="work_thumb"><img src="images/12.jpg" alt="" border="0" /></div>
                    <div class="work_name"><a href="#"><strong>12 FL OZ</strong><br />Narrative / Television</a></div>
                </div>
    //video2           
     <div class="portfolio_details" onclick="change_video(2);">
                    <div class="work_thumb"><img src="images/catch.jpg" alt="" border="0" /></div>
                    <div class="work_name"><a href="#"><strong>THE CATCH: COSTA RICA</strong><br />Narrative / Television</a></div>
                </div>
    
    //video3
           <div class="portfolio_details" onclick="change_video(3);">
                    <div class="work_thumb"><img src="images/cole.jpg" alt="" border="0" /></div>
         <div class="work_name"><a href="#"><strong>COLE PETTICOAT P.I.</strong><br />Narrative / Television</a></div>
                </div>
               
    //video4
     <div class="portfolio_details" onclick="change_video(4);">
                    <div class="work_thumb"><img src="images/mayan_thumb.jpg" alt="" border="0" /></div>          
     <div class="work_name"><a href="#"><strong>MAYAN BLUE</strong><br />Documentary</a></div>
                </div>
               
    //video5
    <div class="portfolio_details" onclick="change_video(5);">
                    <div class="work_thumb"><img src="images/marine.jpg" alt="" border="0" /></div>
    <div class="work_name"><a href="#"><strong>MARINE INVESTIGATORS</strong><br />Documentary</a></div>
                </div>
    
    //video6
    <div class="portfolio_details" onclick="change_video(6);">
                    <div class="work_thumb"><img src="images/police.jpg" alt="" border="0" /></div>             
    <div class="work_name"><a href="#"><strong>DISH POLICE</strong><br />Commercial</a></div>
                </div>
    
    //video7
    <div class="portfolio_details" onclick="change_video(7);">
                    <div class="work_thumb"><img src="images/septic.jpg" alt="" border="0" /></div>
    <div class="work_name"><a href="#"><strong>SUPER SEPTIC MIKE ROBE</strong><br />Commercial</a></div>
                </div>
    
    //video8
    <div class="portfolio_details" onclick="change_video(8);">
                    <div class="work_thumb"><img src="images/adultswim.jpg" alt="" border="0" /></div>
                    <div class="work_name"><a href="#"><strong>ADULT SWIM - HAIKU</strong><br />Commercial</a></div>
                </div>
    	
    //video9
    <div class="portfolio_details" onclick="change_video(9);">
                    <div class="work_thumb"><img src="images/miller.jpg" alt="" border="0" /></div>
                    <div class="work_name"><a href="#"><strong>MILLER LITE / FALCONS</strong><br />Commercial</a></div>
                </div>		
    
    //video10
    <div class="portfolio_details" onclick="change_video(10);">
                    <div class="work_thumb"><img src="images/trulite.jpg" alt="" border="0" /></div>
                    <div class="work_name"><a href="#"><strong>TRUCLEAR HD PLUS</strong><br />Commercial</a></div>
                </div>
    
    //video11
    <div class="portfolio_details" onclick="change_video(11);">
                    <div class="work_thumb"><img src="images/tara.jpg" alt="" border="0" /></div>
                    <div class="work_name"><a href="#"><strong>TARA JEWELRY</strong><br />Commercial</a></div>
                </div>
    
    //video12
    <div class="portfolio_details" onclick="change_video(12);">
                    <div class="work_thumb"><img src="images/boomerang.jpg" alt="" border="0" /></div>
                    <div class="work_name"><a href="#"><strong>BOOMERANG VAMPIRES</strong><br />Commercial</a></div>
                </div>
    
    video13
    <div class="portfolio_details" onclick="change_video(13);">
                    <div class="work_thumb"><img src="images/gapower.jpg" alt="" border="0" /></div>
                    <div class="work_name"><a href="#"><strong>GA POWER FALCONS</strong><br />Commercial</a></div>
    			</div>
    
    		<div class="arrow_holder"><span onclick="document.getElementById('up').display = 'none'; document.getElementById('down').display = 'block';" ><img src="images/arrow-down.png" alt="" border="0" /></span></div>
    		</div>

  • #2
    New Coder
    Join Date
    Jan 2011
    Posts
    84
    Thanks
    9
    Thanked 0 Times in 0 Posts
    can i see this in action, do you have a link?

  • #3
    New Coder
    Join Date
    Feb 2008
    Posts
    57
    Thanks
    8
    Thanked 0 Times in 0 Posts
    There really is no action yet. I keep trying things, but keep deleting it to start from a clean slate.

    Here's the page though: http://www.tylereadams.com/standoff/Work.php


  •  

    Tags for this Thread

    Posting Permissions

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