jquery - <ul> positioned at bottom of parent <div> -
i built jquery dropdown menu using elements position: absolute, , <ul> inside of menu located near bottom, rather @ top of dropdown. here snippet displaying webpage. problem <ul> in blue text (click on image):
function main() { $('#arrow').click(function(){ $('.hidden').animate({ top: '200px' }, 400); $('#slide-wrapper').animate({ margintop: '250px' }, 400); $(this).attr('src','uparrow.jpg'); $(this).off(); $(this).click(function(){ $('.hidden').animate({ top: '-=250' }, 400); $('#slide-wrapper').animate({ margintop: '0px' }, 400); $(this).attr('src','downarrow.jpg'); $(this).off(); main(); }); }); } $(document).ready(main);body { font-family: arial; padding: 0px; margin: 0px; } /* menu elements */ .hidden { z-index: -5; top: -50px; position: absolute; } #arrow { margin-left: auto; margin-right: auto; height: 50px; width: 50px; display: block; } #arrow-box { background-color: white; /* */ } #banner { background-color: gray; /* now, until pictures in */ width: 100%; height: 200px; margin: 0px; padding: 0px; top: 0px; } #dropdown { height: 300px; width: 100%; background-color: black; } .menu { float: left; color: blue; margin: 5px; } /* fonts , such */ h1 { color: white; margin: 0px; } ul { margin: 0px; } .unstyled { list-style-type: none; } /* general structural elements */ #content { width: 75%; height: 500px; margin-left: auto; margin-right: auto; padding-top: 20px; background-color: white; } #slide-wrapper { background-color: #e6e6e6; } /* footer stuff */ footer { height: 400px; background-color: gray; /* */ } #footer-border { background-color: black; /* dark blue later */ width: 100%; height: 20px; } .right { float: right; padding: 10px; padding-left: 0px; padding-bottom: 0px; width: 50%; } .left { padding: 10px; display: inline-block; } .fields { float: right; padding: 2px; } label { padding-right: 5px; } #message { height: 150px; } #contact { margin-left: auto; margin-right: auto; width: 250px; } input, textarea { width: 200px; padding: 0px; margin: 0px; float: right; } .button { width: auto; } #copy { text-align: center; }<!doctype html> <head> <link rel="stylesheet" type="text/css" href="theme.css"/> </head> <body> <div id="banner"> <h1>company name placeholder</h1> </div> <div id="dropdown" class="hidden"> <ul class="menu hidden unstyled"> <li class="menu">home</li> <li class="menu">about me</li> <li class="menu">get website</li> <li class="menu">portfolio</li> </ul> </div> <div id="arrow-box"> <img id="arrow" src="downarrow.jpg"/> </div> <div id="slide-wrapper"> <div id="content"> page content go here. </div> <footer> <div id="footer-border"></div> <div class="left"> customers contacting me, etc. </div> <div class="right"> <form id="contact" method="post" action"mail.php" accept-charset="utf-8"> <ul class="fields unstyled"> <li class="fields"><label for="name">full name</label><input name="name" type="text" maxlength=50 placeholder="your name" required=""></input></li> <li class="fields"><label for="email-address">e-mail</label><input type="email" name="email-address" maxlength=50 placeholder="you@example.com" required=""></input></li> <li class="fields"><label for="subject">subject</label><input name="subject" type="text" maxlength=50 required=""></input></li> <li class="fields"><label for="message">message</label><textarea id="message" name="message" maxlength=1000 required=""></textarea></li> <li class="fields"><input class="button" type="submit" value="send" name="submit"></input></li> </ul> </form> </div> <p id="copy">© 2015 - evan dempsey</p> </footer> </div> <!-- scripts down here --> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="menu.js"></script> </body> </html>
the problem .hidden css jquery:
$('#arrow').click(function(){ $('.hidden').animate({ top: '200px' }, 400); this give elements class "hidden" top:200px, , gives both "dropdown" , text below
to fix it, replace ".hidden" id ("#dropdown") , give top:50px ul below.
and of course have change closing animation well:
$(this).click(function(){ $('#dropdown').animate({ top: '-=250' }, 400);
Comments
Post a Comment