Concrete5 – Drop Down Menü Navigation

Eine Internetseite braucht eine Navigation. Als Concrete5 Anfänger findet man oft den “Auto-Nav” Block der einfach ausschaut, aber einiges an versteckter Power hat. Gerade wenn ein Layout gewünscht ist, das sich nicht mit CSS umsetzen lässt, braucht es ein paar Grundlagen. In diesem Tutorial zeige ich, wie man mit ein paar wenigen Schritten ein Drop-Down Menü in Concrete5.3+ erstellen kann.



Es spielt keine Rolle, welches Themes verwendet wird. In diesem Tutorial werde ich aber das Theme verwenden, welches ich für ein früheres Tutorial erstellt habe:
Wichtig ist lediglich, dass das Theme genügend Platz hat, um eine Drop Down Navigation anzuzeigen.

Nachdem eine neue Concrete5 Seite eingerichtet wurde, sieht das Theme meist ziemlich leer aus. Ausgenommen es wurden Blocks bei den Seitentypen standardmässig eingefügt. In meinem Fall sieht die Seite aber auf jeden Fall folgendermassen aus:


Ziemlich langweilig! Zeit etwas hinzuzufügen!

Seguir leyendo: 1, 2, 3


Hi Pedro,

thanks, I’m glad I was able to offer your some free information!
I haven’t seen a menu which I couldn’t convert to concrete5 but depending on the structure and complexity it might take more or less time.

The menu on your site uses a pretty old fashioned structure based on tables. I wouldn’t recommend to convert that menu to concrete5 but rather create a new one.
But you’ll certainly need some time and developer skills!


I’m not really sure what you mean by “does not appear correctly”. I can see that your navigation doesn’t work well because there’s a gap between the horizontal menu button and the sub items. This is because you’ve got a margin-top: 14px applied to “div#main-container #header ul”. I’d recommend to change that, but beside that, I can’t see any issues!


I’ve added a border-left: 1px style to the menu bar. I wanted to have a divider in between menu items. The problem is I can’t seem to remove the left border for the first menu item. I’ve tried .menu li.first {border: none;} but nothing happens. Has anyone been successful with this?


I am having an issue with the Amiant menu secondary levels disappearing when I go down to click them. Also I can’t seem to get the menu to go to all my pages and I did go to the page types and put the menu in.

I saw that you had some code to install. I am not sure about where I am supposed to be putting code. I am new at this. I have watched a lot of the editing tutorials, but haven’t gotten to all of the tutorials yet.

My webpage is I do have a complete page up and am working on several more.

I can click the add ons in the blocks, but where and how do I put the code in to fix my drop down issue?

I sure would appreciate it if you could give me some pointers in an easy to understand way for someone without a lot of computer programming knowledge. I can cut and paste with the best of them if I know where and how get there. Thanks.


Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *