Jump to content

MarkupSimpleNavigation

Soma

By Soma,
in Modules/Plugins

 Share

Recommended Posts

  • 3 weeks later...
neophron Sr. Member

neophron

Posted
Posted (edited)

Hi Soma,

thanks for this cool module – Danke :-)

I have a question about adding some additional stuff (data-attribut and css-styles) to the markup.

I'm using the uikit: http://getuikit.org and I wanted to insert their accordion in my menu: http://getuikit.org/docs/nav.html (check »Accordion«)

To convert a menu link into a accordion, I  have to add this: <ul class="uk-nav uk-nav-parent-icon" data-uk-nav> and also this: <li class="uk-parent">

to a sublink.

I'm trying to achieve this:

Start

Page 1

   parent-subpage --> this shall be the accordion link

      item 1

      item 2

      item 3

Currently I'm using this:

<?php
$treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
$options = array(
'parent_class' => 'parent',
'current_class' => 'active',
'has_children_class' => 'has_children',
'collapsed' => false,
'show_root' => true
);
echo $treeMenu->render($options);
?>

Thank you

Edited by cstevensjr
Put example in Code Block
Link to comment
Share on other sites
ottogal Sr. Member

ottogal

Posted
Posted

If I understand it right, using the options

'outer_tpl' => '<ul class="uk-nav uk-nav-parent-icon" data-uk-nav>||</ul>',
'inner_tpl' => '<ul class="uk-nav-sub">||</ul>',
'parent_class' => 'uk-parent',

should do it.

  • Like 1
Link to comment
Share on other sites
neophron Sr. Member

neophron

Posted
Posted

If I understand it right, using the options

'outer_tpl' => '<ul class="uk-nav uk-nav-parent-icon" data-uk-nav>||</ul>',
'inner_tpl' => '<ul class="uk-nav-sub">||</ul>',
'parent_class' => 'uk-parent',

should do it.

Thanks for your help.

But for various reasons, I choose a different solution. One of the reason was, that I didn't thought about the accordion trigger. It can't be a link and trigger at the same time.

So I'm gonna build a half static, half dynamic accordion menu. It's possible, cause it's with Processwire :-)

Link to comment
Share on other sites
Soma Hero Member

Soma

Posted
  • Author
Posted

Then in that case you would simply need to tell the module what root your menu has. Default is "/". (third argument)

Most common is for example use the $page->rootParent() as the root. ($page->rootParent() will always return the root level page of the current page even if on a root page itself)

echo $tree->render($options, null, $page->rootParent());
  • Like 1
Link to comment
Share on other sites
Soma Hero Member

Soma

Posted
  • Author
Posted

Sorry there's no example CSS. Definately something I try to add.

Write your CSS with using the css classes the module gives you by default. .  Often not much is needed. Also you can change the class names and use various tpl options too to add your own.

I mostly use the default and give the "outer_tpl" => "<ul class='main-menu'>||</ul>" as a starting point.

  • Like 1
Link to comment
Share on other sites
  • 3 weeks later...
slave Jr. Member

slave

Posted
Posted

Hello
my english is not so good, I hope you can help me
I would like to use this bootsrap navigation, I try to have 3 days :(
can someone please help me ??
 
these are my options

$options = array(
    'parent_class' => '',
    'current_class' => 'active',
    'has_children_class' => 'dropdown',
    'levels' => false,
    'levels_prefix' => '',
    'max_levels' => null,
    'firstlast' => false,
    'collapsed' => false,
    'show_root' => true,
    'selector' => 'template=site',
    'selector_field' => '',
    'outer_tpl' => '<ul class="nav navbar-nav">||</ul>',
    'inner_tpl' => '<ul class="dropdown-menu">||</ul>',
    //'list_tpl' => '<li%s>||</li>',
	'list_tpl' => '<li%s>||</li>',
    'list_field_class' => '',
    'item_tpl' => '<a class="dropdown-toggle" data-toggle="dropdown" href="{url}">{title}</a>',
    'item_current_tpl' => '<a href="{url}">{title}</a>',
    'xtemplates' => '',
    'xitem_tpl' => '<a href="{url}">{title}</a>',
    'xitem_current_tpl' => '<span>{title}</span>',
    'date_format' => 'Y/m/d',
    'code_formatting' => true,
    'debug' => false
);

that is the output......

how can I insert the dropdown dropdown-submenu to this position

08e97b-1459261661.jpg

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Die 3 Meta-Tags oben *müssen* zuerst im head stehen; jeglicher sonstiger head-Inhalt muss *nach* diesen Tags kommen -->
    <title>Bootstrap-Basis-Vorlage</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!--<link rel="stylesheet" type="text/css" href="site/templates/js/topnavsub/css/bootstrap-submenu.min.css">-->
    <!--<script src="site/templates/js/topnavsub/js/bootstrap-submenu.min.js"></script>-->
<style type="text/css">
.dropdown-menu > li.kopie > a {
    padding-left:5px;
}
 
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
   top:0;left:100%;
   margin-top:-6px;;
   -webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;
 }
  
.dropdown-submenu > a:after {
  border-color: transparent transparent transparent #333;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  content: " ";
  display: block;
  float: right;  
  height: 0;     
  margin-right: -10px;
  margin-top: 5px;
  width: 0;
}
 
.dropdown-submenu:hover>a:after {
    border-left-color:#555;
 }

.dropdown-menu > li > a:hover, .dropdown-menu > .active > a:hover {
  text-decoration: underline;
}  

@media (max-width: 767px) {

  .navbar-nav  {
     display: inline;
  }
  .navbar-default .navbar-brand {
    display: inline;
  }
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
  }
  .navbar-default .navbar-nav .dropdown-menu > li > a {
    color: red;
    background-color: #ccc;
    border-radius: 4px;
    margin-top: 2px;   
  }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
     color: #333;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
     background-color: #ccc;
   }

   .navbar-nav .open .dropdown-menu {
     border-bottom: 1px solid white; 
     border-radius: 0;
   }
  .dropdown-menu {
      padding-left: 10px;
  }
  .dropdown-menu .dropdown-menu {
      padding-left: 20px;
   }
   .dropdown-menu .dropdown-menu .dropdown-menu {
      padding-left: 30px;
   }
   li.dropdown.open {
    border: 0px solid red;
   }

}
 
@media (min-width: 768px) {
  ul.nav li:hover > ul.dropdown-menu {
    display: block;
  }
  #navbar {
    text-align: center;
  }
}  
 </style>
    <!-- Unterstützung für Media Queries und HTML5-Elemente in IE8 über HTML5 shim und Respond.js -->
    <!-- ACHTUNG: Respond.js funktioniert nicht, wenn du die Seite über file:// aufrufst -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<div class="container">

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" target="_blank">NewWindow</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">

<ul class="nav navbar-nav">
	<li class="active"><a href="/">Home</a></li>
	<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="/de/seit0/">Site 1</a>
		<ul class="dropdown-menu">
			<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="/de/seit0/action/">SubSite 1</a>
				<ul class="dropdown-menu">
					<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="/de/seit0/action/sub-action/">Sub action</a>
						<ul class="dropdown-menu">
							<li><a class="dropdown-toggle" data-toggle="dropdown" href="/de/seit0/action/sub-action/xxxxxxx/">SubSite</a></li>
						</ul>
						</li>
					<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="/de/seit0/action/another-sub-action/">Another sub action</a>
						<ul class="dropdown-menu">
							<li><a class="dropdown-toggle" data-toggle="dropdown" href="/de/seit0/action/another-sub-action/sub-action/">Sub action</a></li>
						</ul>
						</li>
				</ul>
				</li>
		</ul>
		</li>
	<li><a class="dropdown-toggle" data-toggle="dropdown" href="/de/test140/">Site 2</a></li>
	<li><a class="dropdown-toggle" data-toggle="dropdown" href="/de/aaaaaaaaaaa/">Site 3</a></li>
</ul></div>
</nav>


</div>
    <!-- jQuery (wird für Bootstrap JavaScript-Plugins benötigt) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Binde alle kompilierten Plugins zusammen ein (wie hier unten) oder such dir einzelne Dateien nach Bedarf aus -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
    <script>
	

   </script>
  </body>
</html>
Link to comment
Share on other sites
arjen Hero Member

arjen

Posted
Posted

Hi slave,

Please look at the hooking example provided by soma on Github. You need to change it like this (written in browser, not tested):

function hookGetListClass(HookEvent $event){
    $child = $event->arguments('page'); // current rendered child page
    $class = $event->arguments('class'); // the class string already present
    // any check on that child to set your custom class
    if(count($child->parents) >= 2 && $child->numChildren){ // Only proceed if at least two parents and if an item has children
        $event->return .= " dropdown-submenu"; // add your custom class to the existing
    }
}
  • Like 1
Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
Posted

hi surffun,

of course this is possible. see the docs for all the options: https://github.com/somatonic/MarkupSimpleNavigation#markupsimplenavigation-116

// you need this line only once
$menu = $modules->get('MarkupSimpleNavigation');

// your main menu
echo $menu->render(array(
    'outer_tpl' => '<ul class="show-only-on-big-screens">||</ul>',
    // all other options here
));

// your footer menu for mobile
echo $menu->render(array(
    'outer_tpl' => '<ul class="show-only-on-small-screens">||</ul>',
    // all other options here
));

and then you can hide/show the menu by defining css rules for the classes "show-only-on-small/big-screens": http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

  • Like 3
Link to comment
Share on other sites
Macrura Hero Member

Macrura

Posted
Posted

the menu css would be in the frontend code you are writing, or using; the module is there to generate the markup you require for the menu.

What framework are you using for your site? Many frameworks have navigation css built in (such as bootstrap)

Link to comment
Share on other sites
Soma Hero Member

Soma

Posted
  • Author
Posted

@surffun it's kinda hard to tell in general and it's so obvious that we may fail to see where you're struggling. There's tons of options in MSN to modify the output and examples are everywhere.

Still don't know what the problem is you have.

Link to comment
Share on other sites
Soma Hero Member

Soma

Posted
  • Author
Posted

https://processwire.com/talk/topic/1036-markupsimplenavigation/?p=8998

First post of this thread there's a link to an gist with an example to output bootstrap like html.


But it's just an old example I worked out back then. I never used bootstrap so can't tell if it's still working with newer versions? (one of the reason I avoid frameworks :))

  • Like 1
Link to comment
Share on other sites
Robin S Hero Member

Robin S

Posted
Posted

I know how I "connect" html markup with css but I do not know how I "connect" MSN with css that's the problem.

You don't need to do anything different with your CSS than you would do on a static website - that goes for the MSN module, any PW module and PW in general. Your CSS just sits in a file linked in the <head> of your template.

If I understand correctly you had an HTML page "start.html" and in PW you have successfully added a template "start" associated with template file "start.php". Lets use a simplified example and say start.php looks like this...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?= $page->title ?></title>
    <link rel="stylesheet" href="/site/templates/css/mystyles.css">
</head>
<body>
<ul>
    <li><a href="/page-1/">Page 1</a></li>
    <li><a href="/page-2/">Page 2</a></li>
    <li><a href="/page-3/">Page 3</a></li>
</ul>
<?= $page->body ?>
</body>
</html>

...and that unordered list is your menu. Let's also assume you have added those 3 pages to your PW website via the admin. Now you want to replace the static menu with a dynamic menu generated by MSN. You replace the menu markup with the call to MSN. No options are needed because your menu markup doesn't have any classes or anything not generated the MSN default.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?= $page->title ?></title>
    <link rel="stylesheet" href="/site/templates/css/mystyles.css">
</head>
<body>
<?php
$nav = $modules->get("MarkupSimpleNavigation"); // load the module
echo $nav->render(); // render default menu
?>
<?= $page->body ?>
</body>
</html>

But suppose your static menu does have some classes and also an item for the Home page.

<ul class="main-menu">
    <li class="menu-item"><a class="menu-link" href="/">Home</a></li>
    <li class="menu-item"><a class="menu-link" href="/page-1/">Page 1</a></li>
    <li class="menu-item"><a class="menu-link" href="/page-2/">Page 2</a></li>
    <li class="menu-item"><a class="menu-link" href="/page-3/">Page 3</a></li>
</ul>

Now you do need to set some options for MSN.

<?php
$nav = $modules->get("MarkupSimpleNavigation"); // load the module
// set some options
$nav_options = array(
	'show_root' => true,
	'outer_tpl' => '<ul class="main-menu">||</ul>',
	'list_field_class' => 'menu-item',
	'item_tpl' => '<a class="menu-link" href="{url}">{title}</a>'
);
echo $nav->render($nav_options); // render the menu
?>

Get the idea? So if you were using a bootstrap menu in your static website then you just need to use the MSN options array (and occasionally a hook if you have some more unusual markup) to tell MSN to generate the markup you want.

  • Like 2
Link to comment
Share on other sites
  • 2 weeks later...
slave Jr. Member

slave

Posted
Posted

hi i need help please.
I need this navigation structur

(home) (dienstl1) (dienstl2) (dienstl3)

my site struct is this

home
dienstleistungen (temp=produkte)
--dienstl1 (temp=produktkategorie)
----die1
----die2
----die3
--dienstl2 (temp=produktkategorie)
----die1
----die2
----die3
--dienstl3 (temp=produktkategorie)
----die1
----die2
----die3

I have already tried everything

Link to comment
Share on other sites
Robin S Hero Member

Robin S

Posted
Posted

@slave

<?php
$nav = $modules->get("MarkupSimpleNavigation"); // load the module
// set options
$nav_options = array(
    'show_root' => true,
    'selector' => 'template=produktkategorie'
);
echo $nav->render($nav_options); // render the menu
?>
  • Like 1
Link to comment
Share on other sites
slave Jr. Member

slave

Posted
Posted

@slave

<?php
$nav = $modules->get("MarkupSimpleNavigation"); // load the module
// set options
$nav_options = array(
    'show_root' => true,
    'selector' => 'template=produktkategorie'
);
echo $nav->render($nav_options); // render the menu
?>

thanks vor your help

but that has not helped kann yout help me please

Link to comment
Share on other sites
Robin S Hero Member

Robin S

Posted
Posted

@slave: I didn't notice your produktkategorie pages are not direct children of Home.

Try making a PageArray of your menu items and giving that to MSN as the root argument.

<?php
$nav = $modules->get("MarkupSimpleNavigation"); // load the module
// make PageArray of your menu items
$menu_pages = $pages->find("template=produktkategorie")->prepend($pages->get("/"));
echo $nav->render(null, null, $menu_pages); // render the menu
?>
  • Like 3
Link to comment
Share on other sites
slave Jr. Member

slave

Posted
Posted

@slave: I didn't notice your produktkategorie pages are not direct children of Home.

Try making a PageArray of your menu items and giving that to MSN as the root argument.

<?php
$nav = $modules->get("MarkupSimpleNavigation"); // load the module
// make PageArray of your menu items
$menu_pages = $pages->find("template=produktkategorie")->prepend($pages->get("/"));
echo $nav->render(null, null, $menu_pages); // render the menu
?>

Wow :)

many thanks exactly it was what I wanted.

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
Go to topic listing
×
×
  • Create New...