can you make a menu using blocks?
Permalink
I am used to creating menu via css and menu generators. C5 menu's seems way too complicated and I would rather not pay for a add on when I an easily build one myself.
Question is, can I make a content holder or like an include tag using blocks? I want to define a block with the html for a drop down and include that block on all pages. How can I do this?
Question is, can I make a content holder or like an include tag using blocks? I want to define a block with the html for a drop down and include that block on all pages. How can I do this?
I guess thats my problem is finding out how to create a new block and insert the html within it. Then saving it and using it. I'm reading this tutorial now but its little use because its not explained well. Don't think this is what I need:
http://www.concrete5.org/documentation/how-tos/developers/understan...
http://www.concrete5.org/documentation/how-tos/developers/understan...
The document you are looking at is about creating your own block types within Concrete.
Your original query seems to be about using existing blocktypes to facilitate what you want to create.
If you edit a concrete page, one of the default block types is html block. You can put any html code into it.
I do agree with Shotster that the Concrete way works well, but its also the area that I have found most baffling to learn.
I did learn that you can add an autonav and customise it via the main css file used by your theme. this way it remains strictly concrete and dynamic. Other interaction I have found, proves more difficult to achieve!
Maybe a nav expert could write a really good tutorial.
Iain
Your original query seems to be about using existing blocktypes to facilitate what you want to create.
If you edit a concrete page, one of the default block types is html block. You can put any html code into it.
I do agree with Shotster that the Concrete way works well, but its also the area that I have found most baffling to learn.
I did learn that you can add an autonav and customise it via the main css file used by your theme. this way it remains strictly concrete and dynamic. Other interaction I have found, proves more difficult to achieve!
Maybe a nav expert could write a really good tutorial.
Iain
You'd be well-served taking a few minutes to learn the "C5 way" of creating menus. Basically, the menu system is based upon the page hierarchy of your site, so it's dynamic and automatically updates when you edit your site map. At most, you might have to add some JS to get the menu effect you want, but you should not have to add HTML to get a menu system working.
-Steve
-Steve
In C5 you also create menus with CSS and "menu generators" -- the menu generator in C5 is called the Autonav block.
Because the autonav block is just another block (just like the content or image or youtube block), it needs to be added to an "Area" in a page. But this is problematic because you want it to appear on every page of the site and it would be a pain to have to add it manually every time a new page is added. So you can either add the autonav block to the "Page Defaults" for each page type (via Dashboard -> Pages and Themes -> Page Types, click the "Defaults" button next to the page type in question -- probably want to do this for all page types). Or, a better way (in my opinion) is to "hard-code" the autonav block into your templates themselves, with code like this:
(Note that the above code is for a 1-level dropdown menu -- you can change the 1 to a 2 if your menu has dropdown and then another drop-out from there).
So that's how you get the menu on the page. By default it gives you HTML like this:
So you can write your CSS to match that (using the top-level ul.nav selector to identify the menu, using the .nav-selected selector for the current page, and .nav-path-selected for parent items of the current page). Just put the menu CSS in your theme's stylesheet.
If you need to modify the HTML or do other tricky things, you can customize the template. The built-in template is kind of difficult to figure out though (in my opinion), so I've created one that I think is easier to work with:
https://raw.github.com/jordanlev/c5_clean_block_templates/master/pag...
To use it, save it as "view.php" and put it in this directory on your server (you'll probably have to create this directory):
Hope that helps!
-Jordan
Because the autonav block is just another block (just like the content or image or youtube block), it needs to be added to an "Area" in a page. But this is problematic because you want it to appear on every page of the site and it would be a pain to have to add it manually every time a new page is added. So you can either add the autonav block to the "Page Defaults" for each page type (via Dashboard -> Pages and Themes -> Page Types, click the "Defaults" button next to the page type in question -- probably want to do this for all page types). Or, a better way (in my opinion) is to "hard-code" the autonav block into your templates themselves, with code like this:
<?php $nav = BlockType::getByHandle('autonav'); $nav->controller->orderBy = 'display_asc'; $nav->controller->displayPages = 'top'; $nav->controller->displaySubPages = 'all'; $nav->controller->displaySubPageLevels = 'custom'; $nav->controller->displaySubPageLevelsNum = 1; $nav->render('view'); ?>
(Note that the above code is for a 1-level dropdown menu -- you can change the 1 to a 2 if your menu has dropdown and then another drop-out from there).
So that's how you get the menu on the page. By default it gives you HTML like this:
<ul class="nav"> <li><a href="#">First Page</a></li> <li><a href="#">Second Page</a> <ul> <li><a href="#">Sub-Page 1</a></li> <li><a href="#">Sub-Page 2</a></li> </ul> </li> <li class="nav-path-selected"><a href="#" class="nav-path-selected">Third Page</a> <ul> <li class="nav-selected"><a href="#" class="nav-selected">Sub-Page 1</a></li> <li><a href="#">Sub-Page 2</a> </ul> </li> </ul>
So you can write your CSS to match that (using the top-level ul.nav selector to identify the menu, using the .nav-selected selector for the current page, and .nav-path-selected for parent items of the current page). Just put the menu CSS in your theme's stylesheet.
If you need to modify the HTML or do other tricky things, you can customize the template. The built-in template is kind of difficult to figure out though (in my opinion), so I've created one that I think is easier to work with:
https://raw.github.com/jordanlev/c5_clean_block_templates/master/pag...
To use it, save it as "view.php" and put it in this directory on your server (you'll probably have to create this directory):
SITEROOT/blocks/autonav/
Hope that helps!
-Jordan
Yeah, what jordanlev said. He filled in all the gaps. I totally neglected to mention that you must hard code the autonav block into a theme's template in order for it to appear on every page. Excellent synopsis.
-Steve
-Steve
You can code a menu and put it in an HTML or PHP block.
To use that block throughout the site, you can then save that block to the global scrapbook, and paste it in where you need it. This ensures that any change in the menu is cascaded throughout the site.
Alternatively you can edit the defaults for your page type(s) and add the block. Any pages then created from that page type will contain the block that you have set the menu in.
Iain