I have played around in Dreamweaver for a while now and came up with a nice design for a custom menu bar.
I also have used this example to make a popup for one of the menu items.
The following code works like a charm in chrome, firefox and internet explorer.
But after trying importing the code to Atahualpa, the popup DIV-tag dosen't show up.
![Frown](images/smilies/frown.gif)
HTML Code:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> a.underbar-tag0 { display: block; width: 90px; height: 32px; float: left; color:#000; background-image: url(../../Root/buy_blue.png); background-repeat: no-repeat; background-position: 0px 0px; margin-right: 0px; padding-top: 9px; padding-left: 40px; font-size: 16px; font-family: Arial, Helvetica, sans-serif; margin-left: 80px; font-weight: bold; } a.underbar-tag0:hover { color:#9C0; background-image: url(../../Root/buy_blue.png); background-repeat: no-repeat; background-position: 0px -45px; } a.underbar-tag1 { display: block; width: 114px; height: 32px; float: left; color:#000; background-image: url(../../Root/benefits_blue.png); background-repeat: no-repeat; background-position: 0px 0px; margin-right: 40px; padding-top: 9px; padding-left: 78px; font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin-left: 60px; } a.underbar-tag1:hover { color:#FFF; background-image: url(../../Root/benefits_blue.png); background-repeat: no-repeat; background-position: 0px -45px; } a.underbar-tag2 { display: block; width: 122px; height: 32px; float: left; color:#000; background-image: url(../../Root/help_blue.png); background-repeat: no-repeat; background-position: 0px 0px; margin-right: 40px; padding-top: 9px; padding-left: 70px; font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin-left: 40px; } a.underbar-tag2:hover { color:#FFF; background-image: url(../../Root/help_blue.png); background-repeat: no-repeat; background-position: 0px -45px; } a.underbar-tag3 { display: block; width: 120px; height: 32px; float: left; color:#000; background-image: url(../../Root/kostnad_blue.png); background-repeat: no-repeat; background-position: 0px 0px; margin-right: 40px; padding-top: 9px; padding-left: 72px; font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin-left: 40px; } a.underbar-tag3:hover { color:#FFF; background-image: url(../../Root/kostnad_blue.png); background-repeat: no-repeat; background-position: 0px -45px; } .popup { position: absolute; display: none; z-index: 50; border-collapse: collapse; background-image: url(../../Root/recommended.png); height: 191px; width: 150px; background-repeat: no-repeat; background-position: 0px 0px; float: left; } </style> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> <!-- $(function () { $('.underbar').each(function () { var distance = 10; var time = 250; var hideDelay = 500; var hideDelayTimer = null; var beingShown = false; var shown = false; var trigger = $('.underbar-tag0', this); var info = $('.popup', this).css('opacity', 0); $([trigger.get(0), info.get(0)]).mouseover(function () { if (hideDelayTimer) clearTimeout(hideDelayTimer); if (beingShown || shown) { // don't trigger the animation again return; } else { // reset position of info box beingShown = true; info.css({ top: 20, left: 0, display: 'block' }).animate({ top: '-=' + distance + 'px', opacity: 1 }, time, 'swing', function() { beingShown = false; shown = true; }); } return false; }).mouseout(function () { if (hideDelayTimer) clearTimeout(hideDelayTimer); hideDelayTimer = setTimeout(function () { hideDelayTimer = null; info.animate({ top: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () { shown = false; info.css('display', 'none'); }); }, hideDelay); return false; }); }); }); //--> </script> </head> <body> <div class="bg"></div> <div class="underbar"> <div> <a href="" class="underbar-tag0">Köp nu</a> </div> <table id="dpop" class="popup"></table> <a href="" class="underbar-tag1">Fördelar</a> <a href="" class="underbar-tag2">Nybörjare?</a> <a href="" class="underbar-tag3">Kostnad</a> </div> </body> </html>
I imported the HTML code via Editor --> bfa_header_config.php and dumped the code after "$horizontal_bar1 =", which also worked.
But then I tried to add the javascript under ATO --> Add HTML/CSS --> HTML Inserts: Header but it did not seem to work.
Everything is set and look exactly as it should, but when I hover underbar-tag0, there is no animation.
Am I doing something wrong?
![Confused](images/smilies/confused.gif)
Link to my website: http://e-cigaretter.nu/