Question

Please, someone can help me? I can’t resize #top from li menu item. this is html code:

<div id="top"></div>
<div id="wrapper">
<div id="header">
<div id="topheader"></div>
<div id="baseheader">
<div id="logo"><img src="images/logo.png" width="260" height="131" /></div>
<div id="contentmenu"><div id="menu">
<ul id="nav">
<li id="nav1"><a href="#">ESTUDIO</a></li>
<li id="nav2"><a href="#">PORTFOLIO</a></li>
<li id="nav3"><a href="#">SERVICIOS</a></li>
<li id="nav4"><a href="#">PRESUPUESTO</a></li>
<li id="nav5"><a href="#">CONTACTO</a></li>
</ul>
</div></div>
</div>
</div>

AND THIS jQUERY

$("#nav li[id='nav4']").live('click', function(e) {
$("#top").animate({height:114});
});

Answer 1

I would suggest .on() instead of .live(), “As of jQuery 1.7, the .live() method is deprecated”

<script type="text/javascript"> 
 $(document).ready(function(){ 
  $("#nav").on('click', '#nav4', function () {
    $("#top").animate({height:114});
     return false;
   });
 });
</script>  

http://jsfiddle.net/z4KrL/9/

and don’t use so menu ID’s use Classes, e.g

UPDATE:

• copy code from above to the bottom of the page
• Add link to the Jquery library <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
• remove link to external topheight.js