CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3434558
user3434558

Reputation: 25

JQuery animated nav

I am currently working on an animated nav and I've come to a snag. I trying to make a nav that looks like the images below: enter image description here

enter image description here

I can't quite seem to get all the elements to line up correct and change color all at the same time on hover. With my JQuery I can only get the tabs to animate down not up can someone help?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>untitled</title>
<style type="text/css">

.nav{
margin: 3px 3px 0 0;
width: 103px;
position: relative;
min-height: 200px;
float:left;
bottom:-20px;
}
h2{
color:#ddd;
text-shadow:black 2px 2px 3px;
}
.subnav{
color:white;
float:bottom;
position:absolute
height:25px;
min-height:10px;
width:100px;
background: #ddd;
border: 2px solid;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
z-index:100;
box-shadow: 10px 10px 5px black;
}
.subnav:hover a:hover .h2:hover{
background-color:black;
}




</style>
</head>
<body>
<a href="#" id="aboutlink">
<div class="nav" id="about">
<center><h2>About</h2></center>
<div  class="subnav" id="subabout">
<p id="subtxt"> Learn about<br/> us and our<br/> services  </p>
</div></div></a>

<a href="#" id="worklink">
<div class="nav" id="work">
<center><h2>Work</h2></center>
<div  class="subnav" id="subwork">
<p id="worktxt"> See our<br/> work and<br /> portfolio </p>
</div></div></a>

<a href="#" id="helplink">
<div class="nav" id="help">
<center><h2>Help</h2></center>
<div  class="subnav" id="subhelp">
<p id="helptxt"> Talk to<br/> our support  </p>
</div></div></a>

<a href="#" id="searchlink">
<div class="nav" id="search">
<center><h2>Search</h2></center>
<div  class="subnav" id="subsearch">
<p id="searchtxt">  Search our<br /> site  </p>
</div></div></a>





<script type="text/javascript"src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $('#subtxt').hide();
    $('#worktxt').hide();
    $('#helptxt').hide();
    $('#searchtxt').hide();
    });

    $("#aboutlink").hover(function(){
    $("#subabout").animate({ "height": "80px"}, "slow");
    $("#subtxt").show();
    },
    function(){
    $("#subabout").animate({ "height": "10px"}, "slow");
    $("#subtxt").hide();
    });

        $("#worklink").hover(function(){
    $("#subwork").animate({ "height": "80px"}, "slow");
    $("#worktxt").show();
    },
    function(){
    $("#subwork").animate({ "height": "10px"}, "slow");
    $("#worktxt").hide();
    });

        $("#helplink").hover(function(){
    $("#subhelp").animate({ "height": "80px"}, "slow");
    $("#helptxt").show();
    },
    function(){
    $("#subhelp").animate({ "height": "10px"}, "slow");
    $("#helptxt").hide();
    });

        $("#searchlink").hover(function(){
    $("#subsearch").animate({ "height": "80px"}, "slow");
    $("#searchtxt").show();
    },
    function(){
    $("#subsearch").animate({ "height": "10px"}, "slow");
    $("#searchtxt").hide();
    });





  </script>
  </body>
  </html>

I apologize for the messy coding and appreciate any help.

Upvotes: 0

Views: 71

Answers (1)

matthias_h
matthias_h

Reputation: 11416

I've just updated the Fiddle, maybe you can proceed from there. I've added the jquery to move the <h2> when the .subnavi goes up (only for the first to links - "About" and "Work"). For "Work" I've added to also animate the background-color to black when going up and back to grey when going down. As background-color can't be animated using only jQuery.animate(), I've added as external resource the jQuery plugin jquery-color: https://github.com/jquery/jquery-color. Only changing the background color on hover looks not too well when the subnavi is going down, but maybe you would prefer that.
Following additional adjustments were: 

.nav h2 {
   position:absolute;
   left:10px;
}

so the h2 can get animated.
jQuery for the #worklink hover: 

$("#worklink").hover(function () {
  $("#work h2").animate({
    "top": "-70px"
  }, "slow");
  $("#subwork").animate({
    "height": "80px",
    "background-color": "black"
  }, "slow");
  $("#worktxt").show();
  },

  function () {
    $("#work h2").animate({
    "top": "0px"
    }, "slow");
    $("#subwork").animate({
    "height": "10px",
    "background-color": "#ddd"
    }, "slow");
  $("#worktxt").hide();
});

I've also added some padding-top for body so there's enough space for the .subnav to go up in the Fiddle.

For reference for animate and background-color: http://api.jquery.com/animate/, section "Animation Properties and Values".

Upvotes: 1

Related Questions