CodeBlog.ch

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!



Seguir leyendo: 1, 2, 3

67 Comments

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

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:

1
2
3
4
5
6
7

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

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.

1
2
3
4
5
6
7
8
9
10

/* 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.

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

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?

1
2
3
4
5

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("nn
                  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

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

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.

1
2
3
4
5
6
7
8

/* 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.

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.

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 🙁

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.

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

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,
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?

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.

Hinterlasse eine Antwort

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



CodeBlog.ch, 2024. Theme Material for Coders