Search found 2 matches for tab1

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

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?

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

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>