Concrete5 – Drop Down Auto-Nav Menu
Add auto_nav
Even if there’s an area called “Menu”, I’m going to add my auto_nav Block to the area called “Content”. This isn’t because of a technical reason, I simply need more space for a drop down navigation:
- 1 – Click on “Add To Content”
- 2 – Select “Auto-Nav”
- 3 – Select “Display all” twice
- 4 – Add
We now have a navigation block that automatically add new menu items, if there’s a new page. Nice to work with, but looks ugly:
We need some style!
on April 25th, 2009 at 15:09:07
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
on April 25th, 2009 at 18:01:14
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!
on April 26th, 2009 at 19:46:09
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
on May 17th, 2009 at 01:51:34
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.
on May 17th, 2009 at 07:50:47
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
on June 17th, 2009 at 16:54:54
Works perfectly.
Thanks for the tutorial!
http://www.centremass.com
on June 26th, 2009 at 04:26:37
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?
on June 26th, 2009 at 07:38:09
@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
}
on June 26th, 2009 at 19:08:03
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
on July 11th, 2009 at 11:33:21
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 > 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.
on July 11th, 2009 at 20:09:20
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
on July 13th, 2009 at 12:55:58
Hi
When I click on select template and select drop down, it just inserts the php code into my menu?
on July 14th, 2009 at 04:02:10
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->isEditMode()) { echo(”
“); } else { echo(”
“); } $nh = Loader::helper(‘navigation’); foreach($aBlocks as $ni) { $_c = $ni->getCollectionObject(); if (!$_c->getCollectionAttributeValue(‘exclude_nav’)) { $thisLevel = $ni->getLevel(); if ($thisLevel > $lastLevel) { echo(“\n\n
\n”); } else if ($thisLevel < $lastLevel) { for ($j = $thisLevel; $j 0) { echo “\n”; } $pageLink = false; if ($_c->getCollectionAttributeValue(‘replace_link_with_first_in_nav’)) { $subPage = $_c->getFirstChild(); if ($subPage instanceof Page) { $pageLink = $nh->getLinkToCollection($subPage); } } if (!$pageLink) { $pageLink = $ni->getURL(); } echo ” . $ni->getName(); $lastLevel = $thisLevel; $i++; } } $thisLevel = 0; for ($i = $thisLevel; $i
on July 14th, 2009 at 06:43:43
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?
on July 15th, 2009 at 00:32:50
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
on July 15th, 2009 at 00:50:45
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
on July 18th, 2009 at 23:37:56
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?
on July 20th, 2009 at 07:16:48
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; w\idth:799px;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:160px; w\idth:149px;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:160px;w\idth: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!
on September 27th, 2009 at 20:57:57
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
on October 3rd, 2009 at 15:23:39
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.
on October 7th, 2009 at 17:24:34
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.
on October 7th, 2009 at 17:27:08
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”.
on October 7th, 2009 at 17:43:42
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?
on October 7th, 2009 at 17:57:17
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.
on October 7th, 2009 at 19:33:46
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
on November 13th, 2009 at 13:35:18
Lines 70 – 73 of view.php should be:
echo(“