cssabc123 Posted October 1, 2015 Posted October 1, 2015 This is what I want to render using the MarkupSimpleNavigation module.<style>.custom-restricted-width {/* To limit the menu width to the content of the menu: */display: inline-block;/* Or set the width explicitly: *//* width: 10em; */}</style><div class="pure-menu custom-restricted-width"><span class="pure-menu-heading">Yahoo Sites</span><ul class="pure-menu-list"><li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li><li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li><li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li><li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li><li class="pure-menu-heading">More Sites</li><li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a></li><li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li><li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a></li></ul></div>This is what I tried,<!doctype html><html><head> <style> .custom-restricted-width { /* To limit the menu width to the content of the menu: */ display: inline-block; /* Or set the width explicitly: */ /* width: 10em; */ } </style> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Your page title</title> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"></head><body> <div class="pure-menu custom-restricted-width"> <span class="pure-menu-heading">Yahoo Sites</span> <?php $treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module $options = array( 'outer_tpl' => '<ul "pure-menu-list">||</ul>', 'list_tpl' => '<li class="pure-menu-item">||</li>', 'item_tpl' => '<a href="{url}" class="pure-menu-link">{title}</a>', ); echo $treeMenu->render($options); // render default menu ? ?> </div> </body></html>Outputs a vertical and horizontal menu. But supposed to be just horizontal. What is wrong with my code?
Fokke Posted October 1, 2015 Posted October 1, 2015 Hi! 'outer_tpl' is missing the class attribute. Set 'outer_tpl' => '<ul "pure-menu-list">||</ul>', to 'outer_tpl' => '<ul class="pure-menu-list">||</ul>', 1
cssabc123 Posted October 1, 2015 Author Posted October 1, 2015 But why two menus: horizontal and vertical? Suppose to be vertical only?
Martijn Geerts Posted October 1, 2015 Posted October 1, 2015 Hi cssabc123 Real knowledge comes from experience it yourself, I suggest playing with the module and having fun. Having great times is probably the most important thing in life . Enjoy it!
mr-fan Posted October 1, 2015 Posted October 1, 2015 tipp of the day on MarkupSimpleNavigation... take the whole $options in your call....so you can't loose a wrong setting and have a better control of the html output, css classes and so on... from my experience PURE CSS works great with the module..
cssabc123 Posted October 1, 2015 Author Posted October 1, 2015 Whole options you mean put all options even if default is not changed?
Martijn Geerts Posted October 1, 2015 Posted October 1, 2015 Actually I do that all the time... Put all available options in my code even the default. Then I know what to configure, later on I remove all the options I don't need to set. (solves personal memory issues )
cssabc123 Posted October 1, 2015 Author Posted October 1, 2015 Ok, that makes sense. Though I still wonder why I'm having 2 menus (horizontal and vertical).
mr-fan Posted October 1, 2015 Posted October 1, 2015 Ok here you get a example menu from PURE CSS: in my template depending on what setup you've choosen (main.php or head.php) <?php echo $mainMenuNav; ?> and i've a _func.php with my navigation and some other stuff //mainMenuNav $mainMenu = $modules->get("MarkupSimpleNavigation"); // load the module $options = array( 'parent_class' => 'parent', // overwrite class name for current parent levels 'current_class' => 'current', // overwrite current class 'has_children_class' => 'has_children', // overwrite class name for entries with children 'levels' => true, // wether to output "level-1, level-2, ..." as css class in links 'levels_prefix' => 'level-', // prefix string that will be used for level class 'max_levels' => 1, // set the max level rendered 'firstlast' => false, // puts last,first class to link items 'collapsed' => false, // if you want to auto-collapse the tree you set this to true 'show_root' => true, // set this to true if you want to rootPage to get prepended to the menu 'selector' => '', // define custom PW selector, you may sanitize values from user input 'selector_field' => 'nav_selector', // string (default 'nav_selector') define custom PW selector by using a property or field on a page. Use this setting if you want to overwrite the default nav_selector 'outer_tpl' => '<nav><ul class="nav-list">||</ul></nav>', // template string for the outer most wrapper. || will contain entries 'inner_tpl' => '<ul>||</ul>', // template string for inner wrappers. || will contain entries 'list_tpl' => '', // template string for the items. || will contain entries, %s will replaced with class="..." string 'list_field_class' => '', // string (default '') add custom classes to each list_tpl using tags like {field} i.e. {template} p_{id} 'item_tpl' => '<li><a class="pure-button" href="{url}">{title}</a></li>', // template string for the inner items. Use {anyfield} and {url}, i.e. {headline|title}, if field is of type image it will return url to image (first image if multiple) 'item_current_tpl' => '<li class="selected"><a class="pure-button" href="{url}">{title}</a></li>', // template string for the active inner items. 'xtemplates' => '', // specify one or more templates separated with a pipe | to use the xitem_tpl and xitem_current_tpl markup 'xitem_tpl' => '<a href="{url}">{title}</a>', // same as 'item_tpl' but for xtemplates pages, can be used to define placholders 'xitem_current_tpl' => '<span>{title}</span>', // same as 'item_current_tpl' but for xtemplates pages 'date_format' => 'Y/m/d', // default date formatting for Datetime fields and native created/modified 'code_formatting' => false, // enable or disable code indentations and newslines in markup output 'debug' => false, // show some inline information about rendertime and selectors used as html comments ); $mainMenuNav = $mainMenu->render($options); this is the whole simple call to fit PURE CSS classes and all that stuff...is running on this simple website. best regards PW don't have an effect on your frontend - if you get two menues you create or output theme somewhere.... 1
cssabc123 Posted October 1, 2015 Author Posted October 1, 2015 Thanks mr-fan, I'm will take a look at this.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now