Coding and more – Concrete5, Flex, JavaScript

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.

5-result

Theme

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: http://www.codeblog.ch/2009/01/concrete5-theme-erstellen/
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:

1-empty-theme

Ziemlich langweilig! Zeit etwas hinzuzufügen!

Pages: 1 2 3

67 Responses to “Concrete5 – Drop Down Menü Navigation”

  • kim

    I really need help, need to finish this website today and still cant seem to get the menu working properly

  • Pedro C

    Hi there, first I would like to thank for all the work sharing this info withou profit! People like you make the world a better place!

    Second: I have an old javascript menu, in http://www.luzesom.pt that is “pull-right-side”. Can this be changed to do that, when I upgrade to C5?

  • Remo Laubacher

    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!

    Remo

  • annaexpress

    Hi,

    Please see my website. This template gets applied but for some reason it does not appear correctly.

    Thank you so much for this.

  • Remo Laubacher

    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!

  • Frank Preuß

    Hi Remo,

    I am a newbee with C5.

    I have added your files to display a dropdown menu. I have created two subpages for the page innovation. But the subpages are not displayed.

    Can you help me ? That would be nice. Thank you.

    Frank

  • Frank Preuß

    Hi Remo,

    now it is running. Thank you again. I have changed the setting “Unterseiten Ebenen” to “alle anzeigen”. I have to think about these options :-)

    Frank

  • Remo Laubacher

    Great!

  • Mark

    Hi,

    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?

  • Remo Laubacher

    I don’t think there’s a class called first, at least I can’t seem to see one. You either have to update the PHP script to add a first class or use :first-child instead of .first.

  • Paul

    Hi Remo,

    Thanks for this. I just have a small issue, in my website the template shows up perfect except there is a black empty space beside the drop down. Is this normal, and is there a way to get rid of it?

  • Wanda Jewell

    Hi,

    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 wanderz.us. 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.

    Wanda

  • Remo Laubacher

    Sorry, I’m not the author of the amiant menu, no clue how it works. You’re probably better off asking the actual author!

  • Leave a Reply