How to create this CSS animated, responsive drop-down menu?

First topic message reminder :

Hi all,

Please see my custom-made navigation bar on my forum: http://www.saltvannsprat.com/

It works okay but I would like to replace it with the menu found here: http://red-team-design.com/css3-animated-dropdown-menu/

The reason is that my menu contains many layers and I would like it to be more aestethic and smooth menu. More presicely, when hitting the button "FISKER" I don't want it to open a HTML page with a table with structured information (as it does now: http://www.saltvannsprat.com/h325-fisker), but present an instant, floating, slide-down menu with the exact same information. When hovering over table cells in this new menu it should slide out the next layer of the menu (without having to click on the cells; e.g. this layer: http://www.saltvannsprat.com/h326-kirurger should become visible). And this third level of information should then be clickable which would now open the final pages (e.g. http://www.saltvannsprat.com/t39-acanthurus-achilles).

Basically, I am looking for a quicker, nicer and better way of structuring large amounts of information in a presentable and pretty way, WITHOUT sacrificing depth of information (e.g. the hover-over effect on this level should be maintained in the new menu: http://www.saltvannsprat.com/h326-kirurger).

I hope this is possible. I would be eternally grateful to any help making this happen

Have you tried it like this ?

Code:

<li id="tab1" data-page="/h1-" mouseover="loadTab(this.id, this.dataset.page)">
  <a href="/h332-kutlinger">Kutlinger</a>                                                                           
  <ul class="tabContent">loading...</ul>                                     
</li>

Ange Tuteur wrote:Have you tried it like this ?

Code:

<li id="tab1" data-page="/h1-" mouseover="loadTab(this.id, this.dataset.page)">
  <a href="/h332-kutlinger">Kutlinger</a>                                                                           
  <ul class="tabContent">loading...</ul>                                     
</li>

I don't think that was a combination I tried. When hovering over "Keisere" it now open a small tab in the right position and with the right styling, but that's all. See image below:



Again, thanks for helping me out here, I am sure there is just some small details that are not in place before it all is perfect.

It looks like nothing loaded, did you change it to the correct data-page attribute ?

This is the code I use:

Code:

<li id="tab1" data-page="http://www.saltvannsprat.com/h411-a-keisere" mouseover="loadTab(this.id, this.dataset.page)">
<a href="/h411-a-keisere">Keisere</a>                                                                             
<ul class="tabContent">Laster...</ul>                                                                                   
</li>

Could the menu CSS interfere somehow?

This is the menu CSS:

Code:


#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu {
    width: 100%;
    border: 1px solid #222;
    background-color: #444;
    background-image: linear-gradient(#444, #111);
    border-radius: 3px;
    z-index: 999;
    box-shadow: 0 1px 1px #777;
    position: fixed;
    top: 5px;
    left: 5px;
    margin: 2px auto;
}

#menu img {
    max-width: 125px;
    vertical-align: middle;
}

#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
}

#menu li {
    float: left;
    border-right: 1px solid #222;
    box-shadow: 1px 0 0 #444;
    position: relative;
    z-index: 999;
}

#menu a {
    float: left;
    padding: 5px 10px;
    color: #999;
    text-transform: uppercase;
    font: bold 10px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
    text-align: center;
    z-index: 999;
}

#menu li:hover > a {
    color: #fafafa;
}

*html #menu li a:hover { /* IE6 only */
    color: #fafafa;
}

#menu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 22px;
    left: 0;
    z-index: 990;   
    background: #444; 
    background: linear-gradient(#444, #111);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
    border-radius: 3px;
    transition: all .2s ease-in-out;
}

#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#menu ul ul {
    top: 0px;
    left: 107px;
    position: absolute;
    _margin: 0; /*IE6 only*/
    box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul ul ul {
    top: 28px;
    left: 222px;
    position: fixed;
    _margin: 0; /*IE6 only*/
    box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child { 
    box-shadow: none;   
}

#menu ul a {   
    padding: 4px;
    width: 100px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    font: bold 10px Arial, Helvetica;
}

#menu ul li:first-child > a {
    border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
}

#menu ul a:hover {   
    background-image: linear-gradient(#04acec, #0186ba);
}

#menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3;
    border-bottom-color: transparent; 
}

#menu ul li:last-child > a {
    border-radius: 0 0 3px 3px;
}

Ange Tuteur wrote:It looks like nothing loaded, did you change it to the correct data-page attribute ?

Sorry to bother you again, but do you have time to have another go at this? I am not making any progress in getting it to work. Thanks!

I took a look at the page and you have multiple #tab1 IDs. IDs are unique so, there can only be one of a kind. It looks like because you still have the example tabs in one of your tabs. I'd recommend removing that, or incrementing the tab ID number.
( tab1 => tab2 )

Code:

<li id="tab2" data-page="http://www.saltvannsprat.com/h411-a-keisere" mouseover="loadTab(this.id, this.dataset.page)">
<a href="/h411-a-keisere">Keisere</a>                                                                           
<ul class="tabContent">Laster...</ul>                                                                                 
</li>

Ange Tuteur wrote:I took a look at the page and you have multiple #tab1 IDs. IDs are unique so, there can only be one of a kind. It looks like because you still have the example tabs in one of your tabs. I'd recommend removing that, or incrementing the tab ID number.
( tab1 => tab2 )

Code:

<li id="tab2" data-page="http://www.saltvannsprat.com/h411-a-keisere" mouseover="loadTab(this.id, this.dataset.page)">
<a href="/h411-a-keisere">Keisere</a>                                                                           
<ul class="tabContent">Laster...</ul>                                                                                 
</li>

Thanks, but that didn't help. I now have to attempts at the page with unique tab IDs, but none of the work. The first is enclosed with the tabar class, the second is not. They both do the same: display a small "button" without loading the content, as seen in the image posted earlier.

EDIT: To troubleshoot the problem I made a new HTML page (http://www.saltvannsprat.com/h445-testmeny) where I have the list structure WITHOUT the css from the menu. So now the mneu is just displayed as a normal HTML list. As you can see, it still doesn't work.

EDIT2: I've added your own menu to the same test-page, and it works splendidly. Both are called form the same script, so the script works nicely. It seems to be the integration of your script/method into HTML list that is the problem, somehow.

EDIT3: I THINK I HAVE SOLVED IT! Look at this:

Code:

<li>
<div id="keisere5" class="tab" data-page="/h411-a-keisere" onmouseover="loadTab(this.id, this.dataset.page)">
<a href="/h334-avtrekkerfisk">Avtrekkere</a>   
<ul class="tabContent">Laster...</ul>
</div>
</li>

EDIT4: Althougb the AJAX seesm to work in the sense that the page is loaded, it has lost all CSS styling and the script that was on the page is not working. I have tried to wrap the <div class="bodyContent" around both the <style> and the <script> content, but to no avail. Any suggestion on how to do this?

Hmm when it comes to JavaScript and AJAX you'll need to have those scripts on the page with your bar. The events should be bound, so they work on those new elements added to the body. on() can help with that ( http://api.jquery.com/on/ )

You would most likely need the scripts in JS management.

Ange Tuteur wrote:Hmm when it comes to JavaScript and AJAX you'll need to have those scripts on the page with your bar. The events should be bound, so they work on those new elements added to the body. on() can help with that ( http://api.jquery.com/on/ )

You would most likely need the scripts in JS management.

Ah, that's what I suspected. Too bad, because I haven't been able to get my script to work when it is added to the JS management. Here is the script:

Code:

 <script>
        (function() {
        var data = {

"L. sebae" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br>Volum: <em>>5000 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

        };
var cells = document.getElementById('data-table').getElementsByTagName('td'), i = 0, c;
for(; (c = cells[i++]); ) {
    var id = c.getAttribute('rel');
    if(data[id]) {
        var x = document.createElement('div');
        x.className = 'popup-data';
        x.innerHTML = data[id];
        c.appendChild(x);
    }
}
})();</script>

What this script does is to open a popup box whenever you hover over cells (td) in a table ("data-table"). The content of the popup box is defined under "var data". In this case I only have one such variable data, but for some tables, with many cells of fish, the variable data goes to 40 and beyond. Each cell has a unique rel value.

Unfortunately, when I add this script to the JS management, it not only doesn't work, it also causes the "Latest Topics" widget to malfunction (stops the scrolling and extends the size of the widget). I have absolutely no idea how to either change this script to make it work from JS management, or write a new script that will do what this does.

Try taking off the script tags, and wrapping the code with jQuery's document ready event.

Code:

$(function() {
var data = {

"L. sebae" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br>Volum: <em>>5000 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

        };
var cells = document.getElementById('data-table').getElementsByTagName('td'), i = 0, c;
for(; (c = cells[i++]); ) {
    var id = c.getAttribute('rel');
    if(data[id]) {
        var x = document.createElement('div');
        x.className = 'popup-data';
        x.innerHTML = data[id];
        c.appendChild(x);
    }
}
});

Ange Tuteur wrote:Try taking off the script tags, and wrapping the code with jQuery's document ready event.

Code:

$(function() {
var data = {

"L. sebae" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br>Volum: <em>>5000 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

        };
var cells = document.getElementById('data-table').getElementsByTagName('td'), i = 0, c;
for(; (c = cells[i++]); ) {
    var id = c.getAttribute('rel');
    if(data[id]) {
        var x = document.createElement('div');
        x.className = 'popup-data';
        x.innerHTML = data[id];
        c.appendChild(x);
    }
}
});

Thanks. I did this and the script still messes with the Lastest Posts widget (no scroll and extended in length), see: http://www.saltvannsprat.com/

But strangely enough, not on this page where the script works (!): http://www.saltvannsprat.com/h439-a-snappere See picture below where the popup appears when hovering over the cell and where the Latest Posts widget scrolls and is its normal size:



But unfortunately, the script does not work in content embedded with AJAX as seen when you use the menu and choose the option "snappere", as I do on the picture below. So here I am embedding the same page as the one above, but now when hovering over the cell (red circle) the popup does not appear (!).



EDIT: It's when I hook off "in all the pages" that it messes with Lastest Topics. Unfortunately, I have to hook off that for it to work on the HTML page where the script is supposed to work. If there was an option to only make the script work on HTML pages and the menu, then that would be a step forward. I could call it from every HTML page, I assume, but then I need to use the JS ID and it changes every time I modify the script (add extra var data), which would make it impractical since I will have to update 50+ pages.

EDIT2: Thanks to LG I was able to make teh script work smoothly for all pages except those embedded with AJAX. The trick was to replace line 7 with this:

Code:

var cells = document.getElementById('fisketabell'), i = 0, c;
if(!cells) return;
cells = cells.getElementsByTagName('td');

But all this still doesn't help me much unless I can get it to work on the content embedded with AJAX

Bump. Any idea why teh script, which works on every other page in my forum, does not work on the content embedded through AJAX, and what I can do to solve this issue?

its probably because the other script runs before the ajax script so it does not effect it

_Twisted_Mods_ wrote:its probably because the other script runs before the ajax script so it does not effect it

So this is the order of what takes place?:

1. When a page is entered all scripts in JS management is loaded, including the script for popup that I am not getting to work now.

2. A user may then browse the new menu and "activate" the AJAX script to load content.

3. The loaded content will not be subject to popup script because that script was loaded in "another event".

If this is how it is. Is it possible to "re-activate" the popup script when the AJAX script runs?

I suppose the answer might be found here: http://stackoverflow.com/questions/4619668/executing-script-inside-div-retrieved-by-ajax

But I have no idea on how to implement any of the suggestions on the page. Help, please?

i need to see the two script .. the one for the popup and the ajax one

_Twisted_Mods_ wrote:i need to see the two script .. the one for the popup and the ajax one

The AJAX script:

Code:

<script type="text/javascript">//<![CDATA[
function loadTab(id, page) {
  if (page == 'loaded') return;
  document.getElementById(id).dataset.page = 'loaded';
  $('#' + id + ' .tabContent').load(page + ' .datagrid2');
}
//]]></script>

Together with this goes this HTML (in my menu):

Code:

<li>
<div id="keisere" class="tab" data-page="/h411-a-keisere" onmouseover="loadTab(this.id, this.dataset.page)">
<a href="/h411-a-keisere">Keisere</a>   
<ul class="tabContent">Laster...</ul>
</div>
</li>

And this is the code for the popup script which is found inside the HTML that is to be retrived with the AJAX script:

Code:

<script>
        (function() {
        var data = {

"Acropora abrotanoides" : 'Fóring',

        };
var cells = document.getElementById('fisketabell').getElementsByTagName('td'), i = 0, c;
for(; (c = cells[i++]); ) {
    var id = c.getAttribute('rel');
    if(data[id]) {
        var x = document.createElement('div');
        x.className = 'artspopup';
        x.innerHTML = data[id];
        c.appendChild(x);
    }
}
})();
</script>
</div>

not sure it this will work but you can try

replace the first script with this

Code:

<script type="text/javascript">//<![CDATA[
function loadTab(id, page) {
  if (page == 'loaded') return;
  document.getElementById(id).dataset.page = 'loaded';
  $('#' + id + ' .tabContent').load(page + ' .datagrid2').done(function(){
        var data = {

"Acropora abrotanoides" : 'Fóring',

        };
var cells = document.getElementById('fisketabell').getElementsByTagName('td'), i = 0, c;
for(; (c = cells[i++]); ) {
    var id = c.getAttribute('rel');
    if(data[id]) {
        var x = document.createElement('div');
        x.className = 'artspopup';
        x.innerHTML = data[id];
        c.appendChild(x);
    };
};
   });
};
//]]></script>

The AJAX script is located in the overall_header template. I am reluctant to move the popup scripts from their current location in the HTML pages that are to be loaded through the AJAX script, into the overall_header template as well, because these scripts are so large, especially when combined (the variable data comprise a massive amount of text). I am quite certain I would reach the limit on HTML code in the overall_header if I did it.

Bump. @Ange Tuteur, do you have time to look at the link I provided (http://stackoverflow.com/questions/4619668/executing-script-inside-div-retrieved-by-ajax) to see if there's a solution?