MarkupSimpleNavigation

[Soma]

On 8/5/2019 at 4:46 PM, 999design said:

Update: I hadn't read the documentation properly and was able to add a custom class to pages that had the checkbox field checkbox_nav_prominent checked ?

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($child->checkbox_nav_prominent == 1){
        $event->return .= " is-prominent"; // add your custom class to the existing
    }
}

 

Glad you found it yourself. What's also possible is to just add a page-{name} or page-{id} to the item template and use them to style.

[buster808]

Hi,

I want to add icons to the urls using Mark Up Simple Navigation.

'item_tpl' => '<a href="{url}">{title}</a>'  (can add to all links)

'item_current_tpl' => '<a href="{url}">{title}</a>', (can add to current)

How can I add icon to separate urls

Thanks

 

[dragan]

Well, is there a logic behind it? Icons per page-tree / category?

How do you plan to use icons? Inline SVGs? With :before or :after pseudo-selectors in CSS? Icon-fonts?

The easiest is to use your own classes and then style items with pseudo-selectors.

Or you could use attribute selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors e.g. .nav a[href^="https://mysite.tld/blog/"]:before {}

[teppo]

@buster808, just a heads-up that I've merged your question to the Markup Simple Navigation support thread. When you have questions regarding an existing module, you can find the module-specific support forum thread from the modules directory entry for that particular module ?

[buster808]

Thanks Teppo Ill make sure I do this from now on.

[buster808]

Solved (My JavaScript causing Issue)

 

Hi, I cant get the link for the parent of a sub menu to go to its page - the submenu works fine.

Products (Not Working)
     Products One  (Working)
     Products Two (Working)

$options = array(
    'parent_class' => 'parent',
    'current_class' => 'current',
    'has_children_class' => 'has_children',
    'levels' => true,
    'levels_prefix' => 'level-',
    'max_levels' => null,
    'firstlast' => false,
    'collapsed' => false,
    'show_root' => true,
    'selector' => '',
    'selector_field' => '',
    
    'outer_tpl' => '<ul class="dropdown">||</ul>',
    'inner_tpl' => '<ul>||</ul>',
    'list_tpl' => '<li%s>||</li>',
    'list_field_class' => '',
    'item_tpl' => '<a href="{url}">{title}</a>',
    'item_current_tpl' => '<a href="{url}">{title}</a>',
    'xtemplates' => '',
    'xitem_tpl' => '<a href="{url}">javascript:;</a>',
    'xitem_current_tpl' => '<span>{title}</span>',
    'date_format' => 'Y/m/d',
    'code_formatting' => false,
    'debug' => false
);
echo $treeMenu->render($options, $page, $rootPage);
?>

[J_Szwarga]

@Soma

One of the pages at level 2 of my menu has template access restricted so it does NOT show up in lists/searches by default. The only place I DO need this page to show up is in the menu.

Here's my MarkupSimpleNavigation options:

    $homepage = $pages->get("/");
    $menuItems = $homepage->children();
    
    bd($menuItems, "Menu items");

    $menuOptions = array(
        // 'outer_tpl' => '<ul class="nav nav-pills" id="mainNav">||</ul>',
        'selector' => "check_access=0",
        'inner_tpl' => '<ul class="dropdown-menu">||</ul>',
        'outer_tpl' => '||',
        'has_children_class' => 'dropdown',
        'current_class' => 'current',
        'parent_class' => 'current',
        'item_tpl' => '<a class="dropdown-item" href="{url}">{title}</a>',
        'item_current_tpl' => '<a class="dropdown-item" href="{url}">{title}</a>',
        'max_levels' => 2,
    );

I thought if I set 'selector' => "check_access=0" then the module would ignore security restrictions on any of the pages it finds for the menu. But adding this to the selector does not change anything -- the page using my secure template is still not being included in the menu (unless a user is logged in who has permissions to view that page). How can I get this page included into the menu for all users/guests?

[---Lukas---]

Hi there
I would like to have a menu with dropdowns for the subpages. But sometime I have a lot of subpages I don't want to disply in the menu structure. At the moment I am hiding these pages but this is no solution because then they are also hidden from the search.

How can I choose which menu-item should show subpages and which not?
Hope you can give me a hint how to archeive this.
Best wishes
Lukas

[zoeck]

6 hours ago, ---Lukas--- said:

But sometime I have a lot of subpages I don't want to disply in the menu structure.

You can add a new checkbox field „Show in menu“.
And then use the selector for this field ? 

[---Lukas---]

1 hour ago, zoeck said:

You can add a new checkbox field „Show in menu“.
And then use the selector for this field ? 

Hi Zoeck
Thanky you for your reply - great idea!
So I added a checkbox field "show_in_menu" and added the following code to my menu options. But I get an error.
How can I use this checkbox properly for the selector?

'selector_field' => 'nav_selector',

'selector' => 'show_in_menu',

[zoeck]

2 hours ago, ---Lukas--- said:

Hi Zoeck
Thanky you for your reply - great idea!
So I added a checkbox field "show_in_menu" and added the following code to my menu options. But I get an error.
How can I use this checkbox properly for the selector?

'selector_field' => 'nav_selector',

'selector' => 'show_in_menu',

it’s a normal processwire selector:

https://processwire.com/docs/selectors/

your field name is show_in_menu, correct?

simply use:

'selector' => 'show_in_menu=1',

[AAD Web Team]

EDIT: I'm still curious whether this is possible, but given this template has very low usage on our site I've decided to change it to a Verified URL field instead of a Page Reference. Problem solved!

Hi,

I have a 'redirect' template which consists of basically just a Page Reference field (it was designed for our in-page 'visual' navigation and works perfectly there).

However, in our left navigation I'd also like it to point to the URL of the referenced page rather than the URL of the page that has the redirect template applied.

I tried 'xitem_tpl' => '<a href="{target_page->url}">{title}</a>', but it doesn't appear to accept the target_page->url syntax (it just points to the URL of the current page instead). Is there a way to achieve this? I'd prefer not to have to hide that template type from the left navigation if at all possible.

Thanks!

Margaret

Edited May 4, 2020 by AAD Web Team

[Pip]

Hi all!

I just installed the MarkupSimpleNavigation. I'm trying to implement this code below:

               <ul>
                        <li><a href="./index.html"><span>Home</span></a></li>
                   
                        <li class="active"><a href="#"><span>Pages <i class="fa fa-angle-down"></i></span></a>
                            <ul class="dropdown">
                                <li><a href="./categories-list.html">Categories</a></li>
                                <li><a href="./categories-grid.html">Categories grid</a></li>
                                <li><a href="./typography.html">Typography</a></li>
                                <li><a href="./details-post-default.html">Post default</a></li>
                                <li><a href="./details-post-gallery.html">Post gallery</a></li>
                                <li><a href="./details-post-review.html">Post review</a></li>
                                <li><a href="./contact.html">Contact</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><span>Reviews <i class="fa fa-angle-down"></i></span></a></li>
                        <li><a href="#"><span>Windows <i class="fa fa-angle-down"></i></span></a></li>
                        <li><a href="#"><span>Videos <i class="fa fa-angle-down"></i></span></a></li>
                    </ul>

My problem is: The module has a way to add a class in the tag element li. But there seems to be no way to add in the <span> or the <i> in the list item. 

Any advice? 

 

[kongondo]

@Pip,

Moderator note:

Hi. I moved your question here, the support forum of MarkupSimpleNavigation.

[fisnik]

Hi,

How can i add <a> class to first level of a href, excactly like in this example below, that class should not be added to all <a>.

Also how can i make a link Not clickable for those who have chlidrens? Currently to hide some menus i am using 'selector' => 'navhide!=1, template!=sitemap'. But is there a way where i can assign a field to parent template not to have dropdown, and how to do that?

Thank you

P.s i have read documentation but i dint find a way to achieve this

 

								<ul class="main-menu">
									<li class="main-menu__item main-menu__item--has-child main-menu__item--active"><a class="main-menu__link" href="javascript:void(0);"><span>Home</span></a>
										<!-- sub menu start-->
										<ul class="main-menu__sub-list">
											<li class="item--active"><a href="index.html"><span>01 Home Color Style</span></a></li>
											<li><a href="front_2.html"> <span>02 Home Color Style</span></a></li>
											<li><a href="front_3.html"><span>03 Home Color Style</span></a></li>
											<li><a href="mono/index.html"><span>04 Home Monochrome</span></a></li>
											<li><a href="mono/front_2.html"><span>05 Home Monochrome</span></a></li>
											<li><a href="mono/front_3.html"><span>06 Home Monochrome</span></a></li>
										</ul>
										<!-- sub menu end-->
									</li>
</ul>

My menu configuration is like this:

$options = array(
    'parent_class' => 'parent',
    'current_class' => 'item--active',
    'has_children_class' => 'main-menu__item--has-child',
    'levels' => true,
    'levels_prefix' => 'level-',
    'max_levels' => null,
    'firstlast' => false,
    'collapsed' => false,
    'show_root' => false,
    'selector' => 'navhide!=1, template!=sitemap',
    'selector_field' => 'nav_selector',
    'outer_tpl' => '<ul class="main-menu">||</ul>',
    'inner_tpl' => '<ul class="main-menu__sub-list">||</ul>',
    'list_tpl' => '<li%s>||</li>',
    'list_field_class' => 'main-menu__item {title}',
    'item_tpl' => '<a href="{url}"><span>{title}</span></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' => false,
    'debug' => false
);

 

[combicart]

Hi there,

I would like to start the navigation on the 2nd level / depth instead of the 1st. I've tried to set this up with the `$rootPage` variable, bit I can't seem to find the correct flow for what i'm trying to achieve. Ideally I want to use the following setup:

- Home
-- Location A
--- Page 1
--- Page 2
-- Location B
--- Page 3
--- Page 4

When you're on the Homepage the menu should show: Home - Location A - Location B
When you're on the Location A page, the menu shows: Home (which is the Location A page) - Page 1 - Page 2

Is there a way to achieve this with the MarkupSimpleNavigation module? Or could somebody point me in the right direct to implement this menu?

Thanks!

[kongondo]

Moderator Note

@combicart

Please don't double post. I am sure other forums members have seen your question above and those who have an answer will chip in. I have removed your other topic. Thanks.

[kaz]

I have installed for the first time the "Markup Simple Navigation". It works, the UL is given, as well as the LI with labels parent has_children:

<nav class="nav-main">
	Array<ul>
		<li class="level-1 current"><a href="/">Home</a></li>
		<li class="level-1 has_children"><a href="/service/">Service</a>
			<ul>
				<li class="level-2"><a href="/service/general-service/">General Service</a></li>
			</ul>
		</li>
	</ul>1    </nav>

But I don't understand why the word "Array" is placed before, and a "1" after the UL.

ProcessWire 3.0.165
Blank Installation
MarkupSimpleNavigation 1.3.6

[BitPoet]

Good question. I doubt that MarkupSimpleNavigation does this, my guess goes more towards the template code it is used in.

The "1" likes to appear when you accidentally output the return value of include(), most common when mixing up <?= and <?php (but "echo include('something.php')" has been encountered in the wild too).

The "Array" points towards an echo $something where $something is an array. It might even be another <?= vs. <?php issue like this one:

<?= $myvar = array(1,2,3); ?>

So, to get to the culprit, check your PHP open tags first, then look for superfluous "echo" calls.

[tires]

Is there a way not to show the last level (last child page) in the navigation?
In this case the parent of this last child page should have the "current_class" ...

Thanks!

[kaz]

On 3/22/2021 at 5:10 PM, BitPoet said:

Good question. I doubt that MarkupSimpleNavigation does this, my guess goes more towards the template code it is used in.

The "1" likes to appear when you accidentally output the return value of include(), most common when mixing up <?= and <?php (but "echo include('something.php')" has been encountered in the wild too).

The "Array" points towards an echo $something where $something is an array. It might even be another <?= vs. <?php issue like this one:

<?= $myvar = array(1,2,3); ?>

So, to get to the culprit, check your PHP open tags first, then look for superfluous "echo" calls.

I have placed the code as indicated by the developer. I couldn't find a bug. But I'm not a master programmer, so it was probably my fault.

[kaz]

I have a lister in my menu, and do not want to display their child pages. Can I disable the display of levels for single pages?

[Peter Knight]

In MSN, we have the ability to adjust the inner template by editing this:

<div class="uk-navbar-dropdown"><ul class="uk-nav uk-navbar-dropdown-nav">||</ul></div>

This affects all the drop-down menus on my page (which is great).

But what is you want to just target the output of a single dropdown?

I have a requirement to inject just one of my drop down menus with a 'special link' (just some html)

Quote

Fruit
- page 1
- page 2
- page 3

Colours
- page A (ID 1398)
- page B
- page C
- special link

I made some progress by creating a conditional check

<?php
 if($page->id == 1398)
	$txt3 = "special link";
 ?>

and then adjusting the drop down template to...

<div class="uk-navbar-dropdown">
  <ul class="uk-nav uk-navbar-dropdown-nav">||
  '.$txt3.'
  </ul>
</div>

 but then I realise that it injects my special link into all the drop downs and I just want to appear for the drop down of Colours.

Can anyone point me in the right direction keeping in mind my basic (very) PHP skills?

Thanks
BTW I know @Soma is the author here of the Module but following his beautiful artwork on Instagram, I'm not sure if he's in the web dev industry anymore?

 

 

[wishbone]

On 3/19/2012 at 9:36 PM, Soma said:

Hi gottberg!

To include the root page you would pass the option "show_root" like:

echo $treeMenu->render(array( "show_root"  => true ));

 

sry, very old thread ? but this doesn't work for me, throws this error:

"Fatal Error: Uncaught Error: Call to a member function render() on null in site\assets\cache\FileCompiler\site\templates\basic-page.php:54"

[psy]

Apologies if this has been answered before. Great module and too many questions/anwsers TLDR...

While I love that 'levels' is available, it applies only to <li> elements.

I've created a multi-level CSS Only menu that's responsive for both for 'touch' and 'hover' devices. The nightmare was CSS specificity. CSS doesn't cater for 'parent' - it's in the name!

How can I add a 'level' class to <ul> elements in the options or via a hook?