Hello,
I have some problems with my Dropdown-menu that I realized with jquery.
I have got 4 divs which have a width of 160px and a height of 25px. if i hover them, the width goes to 270 px without an animation time of 0 ms and then the height goes to 375 with an animation time of 300 ms.
jquery code:
- $('#fruhstuck').mouseover(function() {
- $('#fruhstuck').animate({
- height: '+=215'
- }, 300, function() {
- });
- });
- $('#fruhstuck').mouseout(function() {
- $('#fruhstuck').animate({
- height: '-=215'
- }, 300, function() {
- });
- });
- $('#mittag').mouseover(function() {
- $('#mittag').animate({
- width: '+=245'
- },0, function() {
- });
- $('#mittag').animate({
- height: '+=215'
- }, 300, function() {
- });
- });
- $('#mittag').mouseout(function() {
- $('#mittag').animate({
- height: '-=215'
- }, 300, function() {
- });
- $('#mittag').animate({
- width: '-=245'
- },0, function() {
- });
- });
- $('#kaffee').mouseover(function() {
- $('#kaffee').animate({
- width: '+=245'
- }, 0, function() {
- });
- $('#kaffee').animate({
- height: '+=215'
- }, 300, function() {
- });
- });
- $('#kaffee').mouseout(function() {
- $('#kaffee').animate({
- height: '-=215'
- }, 300, function() {
- });
- $('#kaffee').animate({
- width: '-=245'
- }, 0, function() {
- });
- });
- $('#abend').mouseover(function() {
- $('#abend').animate({
- width: '+=245'
- }, 0, function() {
- });
- $('#abend').animate({
- height: '+=215'
- }, 300, function() {
- });
- });
- $('#abend').mouseout(function() {
- $('#abend').animate({
- height: '-=215'
- }, 300, function() {
- });
- $('#abend').animate({
- width: '-=245'
- }, 0, function() {
- });
- });
they all have a z-index so the last is on the top, the 3rd is under it, the 2rd is under the 3rd and the 1st is under the 2nd.
css-code:
- .menuelement {
- width:160px;
- height:25px;
- margin:0px;
- display:inline;
- float:left;
- margin-top:13px;
- padding-top:5px;
- padding-left:13px;
- padding-right:13px;
- font-size:19px;
- cursor:pointer;
- z-index:100;
- position:relative;
- overflow:hidden;
-
- }
- .melementinhalt {
- overflow:hidden;
- height:185px;
- width:380px;
- margin-left:10px;
- }
- #fruhstuck {
- position:absolute;
- left:50px;
- background-image:url(../images/anikasten.png);
- width:405px;
- z-index:15;
- }
- #mittag {
- position:absolute;
- left:240px;
- width:160px;
- background-image:url(../images/anikasten.png);
- z-index:16;
- }
- #kaffee {
- position:absolute;
- left:420px;
- width:160px;
- background-image:url(../images/anikasten.png);
- z-index:17;
- }
- #abend {
- position:absolute;
- right:10px;
- width:160px;
- background-image:url(../images/anikasten_abend.png);
- z-index:30;
- }
so, the first problem is:
if i come to fast over one of the divs, it goes crazy up and down a few times. I don't know why.
esplacially with the 4th div, the #abend div, i have a problem. it goes 2 times up and down if i hover it.
the second problem is: if i come from the first menu item to the second, it works fine. also that works for the 2nd and 3rd and from the 3rd to the 4th. but if i go from the 4th to the 3rd, it doesnt work, because the 4th div is still 270px wide and so its over the other div. i don't know how to solve this.
sorry for my bad english i'm still at learning ;)
greetings, Ole