Concrete5 – Drop Down Auto-Nav Menu

UPDATE November 2011: There’s another drop down tutorial using the SooperFish plugin, check out this page http://www.codeblog.ch/2011/12/concrete5-sooperfish-drop-down-navigation/

A website needs a navigation. If you just started using Concrete5 you’ll realized that its navigation block looks simple but sometimes isn’t. Especially if you want to customize the look beyond css styling. I’m going to show you how to do great an reusable drop down menu with concrete5.3+.

Theme

You can use the default theme, other anything you want. In this tutorial, I’m going to use the theme which I wrote for this tutorial: http://www.codeblog.ch/en/2009/01/concrete5-theme-erstellen/
It doesn’t matter what theme you use, as long as there’s an editable area where you can put your navigation.

When you set up a new site and a new theme, it usually looks pretty empty, unless you’ve added some block using the page defaults. In my case, a newly added page looks like this:

Pretty boring I know! Time to add some stuff

Seguir leyendo: 1, 2, 3

67 Comments

Good day
I got above menu to work with concrete 5.3

Now my ? I need a verticale menu with sub menu
How would I make above menu vertical or were can I get one for concrete?
Thank you

Stu Nicholls has a few vertical menus too. Check this site http://www.cssplay.co.uk/menus/

And find the menu you want, replace the view.css. If you want to use a javascript menu, simply save the javascript code in view.js and Concrete5 includes it!

Good day
Thanks for the help.
I want to use the menu http://www.cssplay.co.uk/menus/flyoutt.html
I have replaced the view.css with the flyout.css file – but now what do I do with the xhtml file – please be gentel new to php, css and conceret.
Please help
Thanks

I have read the instructions many times and followed them (I think correctly) but I can’t get the auto-nav to work on my site. I’ve downloaded and installed other blocks that work correctly. I did notice that the number of files packaged with this is far fewer than other blocks… only a view.php and view.css were available when I downloaded this one… please help… I’m new at using concrete5.

Hey Carolyn,

please note that this tutorial describes how to add a template to a block, it’s not a complete block and therefore doesn’t need all the other files like add.php, edit.php…

But there’s probably one thing I forgot, this kind of templates (that ships in a directory) needs at least Version 5.3! Judging by the url you’ve entered I guess you’re using 5.2.1 which won’t work!

Please try to update to the latest version http://sourceforge.net/project/showfiles.php?group_id=225586&package_id=272908&release_id=677776

Works perfectly.
Thanks for the tutorial!

http://www.centremass.com

We are in the beginning stages of building a site. Was able to get a page to display the drop down menu, but when trying to use it, the drop down part immediately folds u before one can click on the link (most of the time). http://www.hand-drumming.com/index.php/about/
If you leftclick/hold while dragging down, you can make it work, but certainly this is not functioning correctly and is pretty much useless. Is there a tweak in view.css or view.php? It is a Concrete5 site and affects both IE7 and Firefox 3.0.11 Help,please?

@Wilber: It works fine for me but I guess you’re having a problem with the space between the elements. Try making these changes in the css:

.menu a, .menu a:visited {
   height: 30px --> 31px
}
 
.menu li {
   width: 149px --> 148px
}

Remo

Fantastic. Worked like a charm. This had me stymied for a couple weeks – now I can get back to work

Thank you much
W

Great tutorial. Thanks.

I integrated this into the Plain Yoghurt default theme and added transparency to the dropdown backgrounds which works fine for both second and third level.

2 Questions;
Firstly,
The arrow,gif images are not displaying. I have tried using various path statements – created an “img” folder inside “drop_down_menus” folder , and tried different path statements – a full http:// url statement from the site root , or url(../img/grey-arrow.gif) but neither shows up the image. Actually none of the styles (background colours or images) in the following code is showing up.

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
	background-color: #CCCCCC;
	background-image: url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif);
	background-repeat: no-repeat;
	background-position: 130px center;
}
/* style the second level hover */
.menu ul ul a.drop:hover{background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}
.menu ul ul :hover &gt; a.drop {background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}

Secondly,
I want to create a second drop down menu template using Pro_drop12 3D menu from CSSPlay (http://www.cssplay.co.uk/menus/pro_drop12.html). The css file has ID #menu2 as opposed to the .menu class in the view.css for the final_drop menu. I created a second folder in templates called “drop down menu 3d” but when I try to apply it, I see the same style and functionality as for final_drop menu template. I then changed “#menu2” to “.menu” and just got the black bar background with no other text or menu elements. There are png files that form the menu backgrounds. Should these be copied to and included in the site folder? If so where should they reside?

Would appreciate some pointers.

Use Firebug! If css rules don’t work it allows you to check and quickly change the styles without modifying a file. I would have to dig around as well…

If you want to create a second template use a structure like this:
/autonav/templates/drop_down_menu_3d (I wouldn’t use blanks)
/autonav/templates/drop_down_menu_3d/view.php
/autonav/templates/drop_down_menu_3d/css/css-file-1.css
/autonav/templates/drop_down_menu_3d/css/css-file-2.css

When I click on select template and select drop down, it just inserts the php code into my menu?

Hi
I updated to concrete 5.3.1.1 and tried this tutorial.. Does it work visually on localhost as my page will show the full navigation before I apply the custom template but once I set to “drop down menu” all the page shows is this code where the nav should be.. any ideas?

generateNav(); global $c; if ($c-&gt;isEditMode()) { echo("
 
      "); } else { echo("
            "); } $nh = Loader::helper('navigation'); foreach($aBlocks as $ni) { $_c = $ni-&gt;getCollectionObject(); if (!$_c-&gt;getCollectionAttributeValue('exclude_nav')) { $thisLevel = $ni-&gt;getLevel(); if ($thisLevel &gt; $lastLevel) { echo("nn
                  n"); } else if ($thisLevel &lt; $lastLevel) { for ($j = $thisLevel; $j 0) { echo "n"; } $pageLink = false; if ($_c-&gt;getCollectionAttributeValue('replace_link_with_first_in_nav')) { $subPage = $_c-&gt;getFirstChild(); if ($subPage instanceof Page) { $pageLink = $nh-&gt;getLinkToCollection($subPage); } } if (!$pageLink) { $pageLink = $ni-&gt;getURL(); } echo '' . $ni-&gt;getName(); $lastLevel = $thisLevel; $i++; } } $thisLevel = 0; for ($i = $thisLevel; $i

Hey Glen
there are a few possible reasons for this. The most likely ones:
1. Did you download the zip? Don’t copy & paste the code out of the article
2. Are you using short tags?
3. Do you have any php tags?

Hi Remo
Thanks.. I didn’t know what short tags were but realized it might be a php setting on my wampserver.. turned it on and now the navigation works.. I assume normal hosting companies have this setting on..Thanks again

Hi again
If I wanted to use images at the top level and css for the drop down menus under that.. could your view.php code do that.. I am not a programmer but i would assume it would need to be modified.. and I cant see anywhere in concrete where you could assign an image to the page.. maybe a custom field of the page property.. maybe this is all too complicated. The alternative maybe to have the text change to customers funky text on the fly.. but again this would probably require code changes to your view.php as I would only need the top level to change it appearance.. anyway.. any hints as to possibilities would be very much appreciated.
Thanks

Yes, absolutely. I often use page attributes to show top level pictures in the autonav. It’s pretty easy and straightforward to do – where’s your problem?

I checked this in MSIE 6.0 and the last menu heading spills over to the next line

Width of page is 800px using the Plain Yoghurt theme. There are only 5 top menu headings so I adjusted the width to 160px and kept all the width values in the 5.5 hacks relative to your original values.

eg.

/* hack to correct IE5.5 faulty box model */
* html .menu {width:800px; width:799px;}
 
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:160px; width:149px;}
 
 /* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:160px;width:149px;}

When the css is {width:159px;w\idth:148px;}, all five menu items line up on the one bar, in MSIE6.0 but its 5px too short and doesnt line up with the right edge of the header image. At 160px, everything is perfect in MSIE7.0 + , safari and firefox.

When I made these various width adjustments, I also got 1 pixel separations between each menu item on a light grey bgnd which I didnt have before but looks ok so I’ll go with it but have no idea what I changed to make them appear.

Appreciate your magic touch!

Thanks! This was just what I needed! I prefer this over the Superfish dropdown, and it gave me a chance to get my feet wet on custom templates, too.

The only issue I’ve run accross is that a QuickTime movie that I inserted in the main section is overlapping the dropped section of the menu on hover. I tried raising the z-index of the menu to 1000 and the position was already set to “relative”. I’m not sure if I should be addressing this with the menu or the movie.

I used QTObject.js to insert the movie. Here’s the page it’s on:
http://www.usat-mac.us/archives/video

Thanks a bunch for all of your great advice on C5!

Maria

so.addParam(“wmode”, “transparent”);

That’s tricky.. With flash you can set wmode to transparent but with quicktime it’s even trickier.
For IE you can create a dummy iframe which has the same size and a higher z-index than you movie. Using this dummy iframe allows you to use a div with an even higher z-index as the iframe which will then be on top of it… But I don’t think it will work well because focus can change when you interfact with the movie.

I recommend using flash movies anyways. Quicktime isn’t as popular as flash.

I’m new to everything, lol. followed your procedure and I now have a drop down menu in the content area of a page called menu. My question is how do I get that to replace the header menu? Do I combine it somehow? Pretty sure I don’t want to mess with the core on this.

Not sure what your problem is but you can always set the template on any autonav block, no matter where it is.

Just click on the existing autonav in the header and select “custom template”.

Well, that’s what I did first, but doesn’t work the same. Perhaps I need to update the theme somewhere? Not using the default, but don’t think that matters. Went to the home page, edit page, select the header menu and did the assign custom template. I looks like the drop down is there, and I can select each item, but for the “menu” item, which has the other pages under it, it does not drop down. It only goes to the page, and shows the drop down menu in the content area, and then works. Also, it doesn’t appear globally (on all pages). the original header menu appears on all the other pages. do I add it to all of them?

Got it now as custom template to replace the header menu on all pages for my theme, but the behaviour still isn’t working quite right. My header menu is

HOME ABOUT LINKS MEMBERS MENU

clicking on any will take you to the page. But that should occur only on the 1st four items. On item 5 “MENU” I expect to get the drop down to show the auto-nav to the other pages under it. It doesn’t. Like I said, just takes me to the page and then the drop down, displayed in the main content area, funtions for the drop down on the MENU item.

1. Share content accress pages. You should read this tutorial http://www.codeblog.ch/2009/04/concrete5-blocks-within-templates/. You might also want to check the documentation on concrete5 about page defaults. Franz made a video about it

2. Autonav. Check the properties, check the html output. Is it there? No? Modify the autonav properties to show the pages you want to see

Lines 70 – 73 of view.php should be:

1
2
3

echo("<!--[if lte IE 6]&gt;</a>&lt;![endif]-->
 
");

The table needs closing in IE6 on the final drop down.

I love the drop-down-menu, but…
Two very important things to add:
beside of the css hint
[code]
.menu a, .menu a:visited {
height: 30px –> 31px
}

.menu li {
width: 149px –> 148px
}
{/code]
It’s also important to replace the “<?" with "<?PHP" if you would like to use it at a local test-area (like XAMPP) or a "newer" PHP version.
That problem took me 2 hours today 🙁

IE 8 = can get to the dropdown before it disappears.

can NOT, I mean 🙂 … or actually 🙁

Nate, that’s probably because of a missing closing tag. Did you see the comment above? I haven’t updated the code in the tutorial yet!

When will you update the code for IE9?

Some day when I’ve got more time and people start to ask nicely

Na gut, dann frag ich halt auch mal. Wann wird der Code für IE9 angepasst am besten mit Berücksichtigung der aktuellen dritten Preview des IE 10?

😀

Und vielen Dank für die Tuts, die sind echt Klasse. Ein paar neue für C5 wären toll. Leider ist die Community immer noch sehr bescheiden im deutschsprachigen Raum.
Aber neben TYPO3, Joomla, Drupal, etc. finde ich das echt ein tolles Ding, vor allem für sämtliche Webseiten die eigentlich sowieso nur statisch sind,wie die meisten Firmenwebseiten. Da kann dann auch die Sekretärin ohne Backendwissen einfach die Daten für die nächsten Betriebsferien eintippen.

Please note that I didn’t do anything else but take the code from this site http://www.cssplay.co.uk/menus/final_drop.html and wrap it into a concrete5 template. Does the example on that site work for you? (I’m on Linux)
If it does, you should be able to follow the same steps and get the template up and running in no time.

I have tried you code and after a bit of random mucking (I’m not versed in CSS formatting), I managed to get it working with just one problem… my menu has the first item (home) last and the last item (search) first. I have o idea why that’s happening. If i change it back to “header menu” it looks right, but as soon as I change it to “drop_down_menu” it’s backwards.

Any help you can provide so that I can fix this would be greatly appreciated.

Thanks!

Chris

Chris, the sort order is usually pulled from the options you specify in the block editing dialog. I don’t see how the template should be able to influence that unless there’s a manual PHP sort command or some wired HTML output (unclosed tags) or some float rules in the CSS. However, since there are a few possible options, could you post a link?
Thanks
Remo

My site is at http://www.crazychris.ca. I have the auto-nav block configured to list pages in sitemap order which is as follows:

Home
Services
Clients
…
Contact Me
Search

However, when I set the custom template to drop_down_menu it displays backwards, like this:

Search
Contact Me
…
Clients
Services
Home

DOH! I had a “float:right” in the css when it should have been “float:left” so now that I fixed that it’s working great!

Thanks for your help, and for such a great piece of coding!

Regards,

Chris

First, thanks for the work on an awesome and much needed menu mod.
Second, there appears to be a minor glitch. That being, that if you add or delete pages the menu will not show the additions/deletions properly on some pages. Real weird. The workaround is to delete and reinsert the nav from all pages, not too complicated if you use the scrapbook.
Thanks again, marvelous even with the glitch.
Drew

Drew, I’ve planned to write a new drop down tutorial anyways. The pure CSS solution I took from cssplay has the advantage that it doesn’t depend on JavaScript but seems to be a bit tricky in some cases.
The last few weeks have been rather busy but it’s getting higher in my todo list!

hi,
how the script apply to innove themes?

thanks

I can’t help you with that, it’s not a theme I created nor have I ever heard about it! You should probably ask the creator of that theme!

ok ….
any way thanks for your drop down menu turorial

Ichigo, there’s a new tutorial which might work better with your theme, check out this page http://www.codeblog.ch/2011/12/concrete5-sooperfish-drop-down-navigation/

Hi,
I got the menu to work.
I only have one problem.
When I go to a page the menu button of that page should change color.

For example when I choose “about” on the menu, I will be shifted to the about page. When on that Page I want to see this button gray on the meu bar. Other buttons remain old color.

I tried achieving this with the .menu a, .menu a: active code in the CSS without use.

Can u help me asap?

have you tried my new tutorial http://www.codeblog.ch/2011/12/concrete5-sooperfish-drop-down-navigation/ should work better imho!

Hi,

I tried downloading the zip But I get an error saying Page nog found.

see:
http://archive.plugins.jquery.com/content/sooperfish-02-reloaded

What now?

Hi Remo,

I tried the link you send me and I also tried to download te jquery plugin but the page has an error. Is there somewhere else where I can download this from?

Try this http://phloor.13net.at/phloor_plugin/view/109/menu-sooperfish-for-18

Hi Remo

I installed the Sooperfisch Menu. But still cant seem to get it working as I want. As I said, I want the menu which is active to change color when on that page.

For example when I choose “about” on the menu, I will be shifted to the about page. When on that Page I want to see this button gray on the meu bar. Other buttons remain old color.

I used this code:
ul#nav li a:active {
padding:10px 15px;
font-family:helvetica,arial,verdana,sans;
text-decoration:none;
color:#000000;
background:#b7d186;
}

I also wanted the blocks of the submenu’s Larger and the font smaller. But I cant seem to find where I can do that.

Can you please help me.

CodeBlog.ch