Auto-Nav Template
In diesem Tutorial http://www.codeblog.ch/2009/03/concrete5-templates/ hab ich erkärt, wie man einen “Page-List” Block erweitern kann, um ein Thumbnail anzuzeigen. Der Ablauf ist wiedrrum der gleiche.
Wir erstellen ein paar Verzeichnisse. Innerhalb “blocks” sind folgende Verzeichnisse anzulegen: “autonav/templates/drop_down_menu”
Bitte beachten, dass im Ordner “concrete” nochmals ein Ordner “blocks” existiert, markiert mit der Nummer 2. Dieser Ordner gehört zum sogennanten “Concrete5 Core”, darin bitte nichts verändern!
Dieses Tutorial verwendet das CSS Menü von Stu Nichols, welches ihr hier findet könnt: http://www.cssplay.co.uk/menus/final_drop.html. Es funktioniert mit zahlreichen Browsern und benötigt keine einzige Zeile JavaScript!
Als erstes erstellen wir eine Datei mit dem Namen view.css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/final_drop.html Copyright (c) 2005-2008 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ .menu {width:745px; height:32px; position:relative; z-index:100;font-family:arial, sans-serif;} /* hack to correct IE5.5 faulty box model */ * html .menu {width:746px; w\idth:745px;} /* remove all the bullets, borders and padding from the default list styling */ .menu ul {padding:0;margin:0;list-style-type:none;} .menu ul ul {width:149px;} /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ .menu li {float:left;width:149px;position:relative;} /* style the links for the top level */ .menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; width:138px; height:30px; background:#09c; padding-left:10px; line-height:29px; font-weight:bold;} /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited {width:149px; w\idth:138px;} /* style the second level background */ .menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 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;} /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;} /* style the third level hover */ .menu ul ul ul a:hover {background:#b2ab9b;} /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;} /* another hack for IE5.5 */ * html .menu ul ul {top:30px;t\op:31px;} /* position the third level flyout menu */ .menu ul ul ul{left:149px; top:-1px; width:149px;} /* position the third level flyout menu for a left flyout */ .menu ul ul ul.left {left:-149px;} /* style the table so that it takes no ppart in the layout - required for IE to work */ .menu table {position:absolute; top:0; left:0; border-collapse:collapse;;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited {background:#d4d8bd; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;} /* yet another hack for IE5.5 */ * html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;} /* style the top level hover */ .menu a:hover, .menu ul ul a:hover{color:#000; background:#b7d186;} .menu :hover > a, .menu ul ul :hover > a {color:#000; background:#b7d186;} /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul{visibility:visible; } /* keep the third level hidden when you hover on first level list OR link */ .menu ul :hover ul ul{visibility:hidden;} /* make the third level visible when you hover over second level list OR link */ .menu ul :hover ul :hover ul{ visibility:visible;} |
Ich hab ein paar Modifikationen gemacht, diese sind aber nicht erforderlich. Stu Nichols erlaubt es, das CSS nach eigenen Wünschen zu verändern, solange die Notiz zu Beginn der CSS Datei nicht entfernt wird.
Als nächstes brauchen wir ein paar Zeilen PHP Code um die HTML Struktur zu erstellen. Im Allgmeinen ist es am einfachsten, die bestehende Ansicht eines Blocks zu kopieren. In diesem Fall wäre dies “concrete/blocks/autonav/view.php”. Ihr könnt aber auch den folgenden Code kopieren und in der Datei view.php im Verzeichnis drop_down_menu abspeichern:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <?php defined('C5_EXECUTE') or die(_("Access Denied.")); $aBlocks = $controller->generateNav(); global $c; if ($c->isEditMode()) { echo(" <div class=\"menu\" style=\"position:inherit!important;\"> <ul>"); } else { echo(" <div class=\"menu\"> <ul>"); } $nh = Loader::helper('navigation'); foreach($aBlocks as $ni) { $_c = $ni->getCollectionObject(); if (!$_c->getCollectionAttributeValue('exclude_nav')) { $thisLevel = $ni->getLevel(); if ($thisLevel > $lastLevel) { echo("<!--[if IE 7]><!--></a><!--<![endif]-->\n<!--[if lte IE 6]> <table> <tr> <td><![endif]-->\n <ul>\n"); } else if ($thisLevel < $lastLevel) { for ($j = $thisLevel; $j < $lastLevel; $j++) { echo("</a></li> \n</ul> \n<!--[if lte IE 6]></td> </tr> </table> </a><![endif]--></li> \n"); } } if ($thisLevel == $lastLevel && $i >0) { echo "</a></li> \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 ' <li><a href="'.$pageLink.'">' . $ni->getName(); $lastLevel = $thisLevel; $i++; } } $thisLevel = 0; for ($i = $thisLevel; $i <= $lastLevel; $i++) { echo("</a></li> </ul> "); } echo '</div> '; ?> |
Das Ergebnis
Jetzt haben wir unser Template erstellt, wir klicken nochmals auf unsere unschön formatierte Navigation, wählen “Set Custom Template” und finden dort unser Template. Auswählen und Speichern and schon haben wir ein Menü wie dieses:
Sämtliche Files (Theme & Auto-Nav Template) können hier heruntergelanden werden: Theme + Auto-Nav Template
Einfach in euer Concrete5 Verzeichnis entpacken, sämtliche Verzeichnisse und Dateien werden automatisch erstellt!


Remo Laubacher
Just look through sooperfish-theme-black.css (or whatever css you’ve copied) and replace the colours!
Can you please comment to the right post (http://www.codeblog.ch/2011/12/concrete5-sooperfish-drop-down-navigation/)? thanks!
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