Forums

Navigation Menu and Drop Down

Permalink
Hello All,

I have been on and off with Concrete5 and I am trying to fully commit to it. I really need help on how to create a drop down menu or even just style the menu as I have to resort to cloneamental and stripping everything out except the nav cause of how confusing it is.
Everywhere I've looked is either use an add on in marketplace/third party (Superfish) and even the Concrete5 developers are using a $20 accordian menu in their youtube videos.
Any help is appreciated.

Thanks.
 
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi ramdettmer,

The Auto-Nav block is commonly used to produce multiple levels of nested unordered lists.

Here is an example of the HTML produced by the Auto-Nav block with sample content and showing all child pages.
<ul class="nav">
    <li class="">
        <a href="http://mysite.com/index.php/services" target="_self" class="">Services</a>
    </li>
    <li class="">
        <a href="http://mysite.com/index.php/portfolio" target="_self" class="">Portfolio</a>
    </li>
    <li class="">
        <a href="http://mysite.com/index.php/team" target="_self" class="">Team</a>
        <ul>
            <li class="">
                <a href="http://mysite.com/index.php/team/about" target="_self" class="">About</a>
            </li>
            <li class="">
                <a href="http://mysite.com/index.php/team/careers" target="_self" class="">Careers</a>
Viewing 15 lines of 36 lines. View entire code block.

The Auto-Nav block creates the basic HTML scaffolding for you. With this HTML, you can use CSS to create a drop-down menu. There are many tutorials available that will show you how to do this.

Using custom templates, you can customize the HTML produced by the Auto-Nav block and include things like CSS files, JavaScript files, and images.

Where things get more complicated is how you choose to handle your navigation on mobile screen widths and how you support touch events on desktop screen widths. These are not concrete5 specific issues and fall under general front end development/responsive web design.

In addition to reading up on responsive web design, you might want to look at how the free concrete5 themes handle their navigation.