[RESOLVED] Toggling Bootstrap menu items

@ryanrowlettMay 24.2017

Hello,
I would like to make the menu items toggle open and closed on desktop as it does in mobile. Im guessing that attaching JS event handlers to the dropdown headings and toggling a “hidden” class is in the right direction but I’m not so confident in JS syntax.

Any help would be greatly appreciated.

Ryan

My project is here: ~~[url]~~http://www.shandakenprojects.org/dev/[/url]

to post a comment

JavaScript

@rootMay 26.2017 — #Please post the code thats causing problems and use forum BBCode tags to wrap the code blocks with.

Allot of what you are asking can be done in CSS and doesn't require JavaScript to do this.

You might want to look at some CSS menu examples online.

@ryanrowlettauthorMay 26.2017 — #Hi . ,

Thanks for your reply. The original code is an altered version of this. Id much prefer to use CSS but couldnt think of a clean way to do it.

[code=html]
 <div class="collapse navbar-collapse">
 <ul class="nav navbar-nav">
 <?php foreach($pages->visible() as $p): ?>
 <?php if(($p->hasVisibleChildren() && $p->template() != 'editions')): ?>
 <li class="dropdown">
 <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?> <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu">
 <?php foreach($p->children()->visible() as $p): ?>
 <li<?php e($p->isOpen(), ' class="active"') ?>>
 <a class="page-<?php echo $p->slug() ?>" href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>
 </li>
 <?php endforeach ?>
 </ul>
 </li>
 <?php elseif($p->template() == 'editions'): ?> 

 <li class="<?php e($p->isOpen(), 'active') ?>">
 <a href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>
 </li>
 <?php endif ?>
 <?php endforeach ?>
 </ul>
 </div>
 [/code]

@ryanrowlettauthorMay 26.2017 — #Hi .,

Its actually a native function of Bootstrap CSS that the gentleman who coded the sidenav tutorial had removed by adding [code=html]display:block;[/code] to the dropdown item. I removed this and it works fine now. Thanks again for your suggestion and time. Ryan

[RESOLVED] Toggling Bootstrap menu items

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Toggling Bootstrap menu items

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴