Jump to content

MarkupSimpleNavigation


cssabc123
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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....;)

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...