2

I am building a Joomla and T3 Framework Template based website. Since I am having the Navbar not in it's native position (On Top), I had to come up with a work around.

I am using two Menu Modules of the "Bootstrap accordion plugin" now. The "Big" / Vertical Menu for big and medium sized screens and the second one appears in another module position, right on top. So far so good, everything works out.

I am using the Bootstrap Accordion Plugin and modify it right now. Here comes the problem:

The Menu in mobile screen size - has the button which extends the menu.

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobmenu">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

The Button Works, but when I click on any menu entry the the page is loaded and the menu slides in again. That is annoying if you want to reach on of the sub menu items, because you first have to click the button to open the menu, click on the menu button, than the menu slides in again... and you have to activate the button again. Then it will show the menu with submenu items and you can click on the link and will get to the page. after this the menu slides in again.

I want to have the menu activated at all time, it should not slide in with any menu click. Only a second click on the Menu Button should make it slide in again, when the user decides to. How do I have to modify this code in order to make it work that way? Thank you for your help ..

  <?php
/**
 * Joomla! module - Bootstrap Accordion Menu
 *
 * @author Yireo (info@yireo.com)
 * @copyright Copyright 2012 Yireo.com. All rights reserved
 * @license GNU Public License
 * @link http://www.yireo.com
 */

// Deny direct access
defined('_JEXEC') or die;
?>
<?php if($params->get('load_js', 1) == 1) : ?>
<script type="text/javascript">
if (typeof modBootstrapAccordionMenu_hover === "undefined") {
  var modBootstrapAccordionMenu_hover = <?php echo (int)$params->get('js_hover', 0); ?>;
}
</script>
<?php endif; ?>

<div class="accordion" id="<?php echo $tag_id; ?>">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobmenu">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    <div class="accordion-group collapse navbar-collapse" id="mobmenu">
        <?php foreach($parents as $parent) : ?>
        <?php $collapse_status = ($parent->active) ? 'in' : 'out'; ?>
        <div class="accordion-heading">
            <?php if(!empty($parent->childs)) : ?>
            <a class="menulist accordion-toggle accordion-parent <?php echo implode(' ', $parent->classes); ?>" data-toggle="collapse" data-parent="#<?php echo $tag_id; ?>" data-href="<?php echo $parent->href; ?>" href="#<?php echo $parent->html_id; ?>"><?php echo $parent->title; ?><i class="fa fa-chevron-down pull-right"></i></a>
            <?php else: ?>
            <a class="menulist accordion-toggle <?php echo implode(' ', $parent->classes); ?> dropdown-toggle" href="<?php echo $parent->href; ?>"><?php echo $parent->title; ?></a>
            <?php endif; ?>
        </div>
        <?php if(!empty($parent->childs)) : ?>
        <div id="<?php echo $parent->html_id; ?>" class="accordion-body collapse <?php echo $collapse_status; ?>">
            <div class="accordion-inner">
                <?php modBootstrapAccordionMenuHelper::submenu($parent->childs); ?>
            </div>
        </div>
        <?php endif; ?>
        <?php endforeach; ?>
    </div>
  </div>

EDIT: This is the code which sits in a second file, needed for the submenu. I have created a mod_overwrite for both files.

I am not sure if you need this code as well .. but just in case .. here it is

<?php
/**
 * Joomla! module - Bootstrap Accordion Menu
 *
 * @author Yireo (info@yireo.com)
 * @copyright Copyright 2012 Yireo.com. All rights reserved
 * @license GNU Public License
 * @link http://www.yireo.com
 */

// Deny direct access
defined('_JEXEC') or die;
?>
<ul class="menulist">
    <?php foreach($items as $item) : ?>
    <li class="<?php echo implode(' ', $item->classes); ?>">
        <a href="<?php echo $item->href; ?>" class="menulist"><?php echo $item->title; ?></a>
        <?php if(!empty($item->childs)) : ?>
        <?php modBootstrapAccordionMenuHelper::submenu($item->childs); ?>
        <?php endif; ?>
    </li>
    <?php endforeach; ?>
</ul>
  • The menu is sliding in due a jQuery code snippet so providing PHP and HTML in your question won't help. If you could provide us with a link to your website, it will be easier to track down the issue – Lodder Dec 11 '14 at 14:39
  • Right, I've taken a look at your site but I'm so confused with your question. Are you saying that when you click on something like Profil, it should just slide down and not direct you to a page? Or are you saying when you click it, it should take you to the page, and then the menu should slide down and so should the submenu items for Profil? – Lodder Dec 11 '14 at 15:05
  • 1
    First you need make your browser smaller, so that you can see the actual menu i am referring to. slide your browser window until the menu on the right side disappears and is shown on top of the site. at first you won't see the menu, only the button i was referring to. on click of the button, the menu will slide out. now you can click on any link, and after that the menu will slide in again. this is what i want to prevent from happening. For a working example go to getbootstrap.com/examples/navbar and view it with a small browser - there the menu stays out – Dieter05 Dec 11 '14 at 15:10
  • Ah Ok I see now. The thing is, if you don't want the menu to slide down, how are people supposed to access submenu items cause currently, then you click on Profile, it takes you to a new page, so how are people supposed to click on Geschäftsführung ? – Lodder Dec 11 '14 at 15:25
  • 1
    If you look at the code at the page the href and data-href are different. If you copy the value in href to data-href, it works as you apparently intended. Which makes sense since data-href is what the javascript uses and is a link to a separate page, while href links are not. Can't really tell you how to fix this, but knowing that data-href values are wrong should be a starting point. – Ville Niemi Dec 11 '14 at 15:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.