我怎样才能实现这个导航菜单？

Question

I need to implement a menu navigation like this for a DotNetNuke website (I am looking for the part of navigation that started with "I want to...")

The problem is most menu systems using dropdown popus but in my case the menu needs to shift down the content.

I am using SuperFish and already changed some CSS to make dropdowns inserted between menubar and the rest of content but no success in animation. How could I animate this effect?

I am a ASP.Net developer with a bit knowledge of JavaScript/CSS. This is for DotNetNuke and the navigation menu is dynamically created.

Answer 1

Most drop down menus that appear over other elements on the page will be positioned absolute in the css, if you want to push the content down then you could try "position:relative" instead.

The menu you posted is actually jquery driven and doesn't appear to have a "position" element in the CSS, it just expands a hidden box onclick.

Answer 2

$("#homeone").click(function(){
    $(".want2>ul").slideToggle("slow");
});

That, and a bit CSS, see here:

http://codepen.io/damianocel/pen/wKKbjO