Erledigt - Joomla 3.2.3 mit Bootstrap Navbar dropdown problem

mr_otin · 09.06.2014

Hallo Community,

ich benötige Hilfe bei folgendem Problem. Sobald ich in der Navigation ein Dropdownfeld anklicke muss ich mit der Maus den Hover-bereich verlassen und nochmals hineinfahren, bevor er das Dropdow-Menü anzeigt.

Webseite:

Wie kann ich das ganze umgehen. Ich benötige nur den Hover damit das Dropdown ausfahren soll? Es gibt zwar Lösungsansätze per jquery die aber nicht funktionieren! Ich bin für jede Hilfe dankbar.

MfG
Dave

hub · 09.06.2014

Moin,
ein beliebter Fehler - und das könnte unter Umständen dein Problem sein:

Code:

15:    <script src="/hermeshof/media/jui/js/jquery.min.js" type="text/javascript"></script>
...
22:    <script src="http://www.deepgrey.de/hermeshof/modules/mod_jux_background_slideshow/assets/js/jquery.min.js" type="text/javascript"></script>

Ich würde erstmal versuchen, jQuery in Zeile 22 zu eliminieren. Damit dürfte zumindest der erste Satz Fehler behoben sein.

Gruß Ulli

mr_otin · 09.06.2014

Moin Ulli,

danke für deine Antwort! Jedoch kann ich den Fehler im Bezug auf die Slideshow (Zeile 22) ausschließen. Da diese erst jetzt zum Schluss dazu gekommen ist! Die Navbar war mit das erste was eingebaut wurde. Und sie lief von Anfang an so unter Joomla! Erstelle ich die Navbar ohne einbindung von Joommla funktioniert sie tadellos.

Dieses Problem ist auch bekannt und es gibt Workarounds dafür, jedoch funktionieren diese nicht. Und ich weiss nicht warum. Hier mal der Coder der Index.php

Code:

<?php defined( '_JEXEC' ) or die;
// variables
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$menu = $app->getMenu();
$active = $app->getMenu()->getActive();
$params = $app->getParams();
$pageclass = $params->get('pageclass_sfx');
$tpath = $this->baseurl.'/templates/'.$this->template;

// generator tag
$this->setGenerator(null);

// bootstrap
JHtml::_('bootstrap.framework');

unset($doc->_scripts[$this->baseurl.'/js/bootstrap.min.js']);
$doc->addScript($tpath.'/js/bootstrap.js');
//$doc->addScript($tpath.'/js/jquery-162.js');
//$doc->addScript($tpath.'/js/hide.js');
//$doc->addScript($tpath.'/js/bootstrap-hover-dropdown.js');
//$doc->addScript($tpath.'/js/jquery.easing.min.js');

// template css
$doc->addStyleSheet($tpath.'/css/template.css.php');

// less.js
// NOTE: comment in the two following lines -> comment out all (!) css above
//$doc->addCustomTag('<link rel="stylesheet/less" type="text/css" href="'.$tpath.'/less/template.less" />');
//$doc->addCustomTag('<script src="'.$tpath.'/js/less-1.7.0.min.js" type="text/javascript"></script>');

?>
<!doctype html>
<html lang="<?php echo $this->language; ?>">
    <head>
        <jdoc:include type="head" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <link rel="apple-touch-icon-precomposed" href="<?php echo $tpath; ?>/images/apple-touch-icon-57x57-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo $tpath; ?>/images/apple-touch-icon-72x72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo $tpath; ?>/images/apple-touch-icon-114x114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo $tpath; ?>/images/apple-touch-icon-144x144-precomposed.png">
  </head>
    <body class="<?php echo (($menu->getActive() == $menu->getDefault()) ? ('front') : ('site')).' '.$active->alias.' '.$pageclass; ?>">
        <div id="close-box"></a></div>
  <div class="background-slider"><jdoc:include type="modules" name="background-slider" />
          <div class="container-fluid">
          <div id="header">
            <div class="logo">
              <img src="<?php echo $tpath ?>/images/Wappen.png" class="img-responsive">
          </div>
          <nav class="top_nav_area navbar-default role="navigation">
              <div class="container-fluid">
                <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-modules">
                          <span class="sr-only">Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="navbar-modules">
                      <jdoc:include type="modules" name="top_nav_area" />
               </div>
              </div>
          </nav>
          </div>
          <div id="MainContent">
        <div id="top-right">
            <div class="top_right pull-right">
                <div class="btn-group">
                  <a href="index.php/kontakt/buchungsanfrage/" class="btn btn-success">Buchungsanfrage</a>
                </div>
            </div>
          </div>
        <div class="container-fluid content">
        <div class="breadcrumbs">
            <jdoc:include type="modules" name="breadcrumbs" />
        </div>
        <div class="row">
        <div class="col-lg-8">
            <jdoc:include type="component"/>
        </div>
        <div class="sidebar-right col-lg-4">
            <jdoc:include type="modules" name="sidebar-right" style="xhtml" />
        </div>
        </div>
       </div>
      </div>
     <div id="footer">
      <div class="container-fluid footer">
          Hermeshof 2014 | 54411 Trittenheim |<a href="idex.php/Impressum"> Impressum </a>|<a href="index.php/Kontakt"> Kontakt</a>
      </div>
    </div>
      </div>         
</div>
    <script    type="text/javascript" src="//use.typekit.net/zoj3fta.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  </body>
</html>

hub · 09.06.2014

Moin moin,
mit der Version 3 wird jQuery offenbar standardmäßig geladen. Ich könnte mir vorstellen, das das der Grund ist, warum es ohne Joomla drumherum läuft und mit Joomla nicht.
In Zeile 22, jetzt 21, wir jQuery ein 2. mal geladen. Alles, was dazwischen auf jQuery aufbaut, dürfte damit hinfällig sein ...
Dann hast du noch ein Schnipsel:

Code:

});
jQuery(document).ready(function(){
    jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});

Dort wird ein Fehler produziert, da das zugehörige Script offenbar nicht geladen wird. Das kann ebenfalls zu Folgefehlern führen.
Ich muss mal ne blöde Frage stellen, also nicht auf den Schlips getreten fühlen:
Hast du im Modul des Menüs den Schalter "Show Sub-menu Items" auf Yes (bzw. alles in deutsch) stehen?

mr_otin · 10.06.2014

Guten Morgen Ulli,

Ja, Show Submenu-Items sind aktiviert. Ich bin halt den Weg gegangen wie im Tutorial von Alex (Blank Template Bootstrap edition).

Dabei wird ein Modul Navbar im Backend angelegt und eine Position in der templateDetails.xml definiert. Als Menüklassensuffix wurde " navbar-nav" vergeben. Durch hinzufügen eines overrides für mode-menu habe ich die klasse dropdown-menu erstellt (damit das menu ab dem zweiten Level richtig dargestellt wird).

Für das funktionieren des dropdown's muss in der default.php des overrides eine Klasse dropdown-menu in das <ul> Element hinzugefügt werden und in der default_url.php im <a> Tag ein data-toggle="dropdown".

So ist der Weg laut dem Tutorial. Jedoch lauft es halt suboptimal!

MfG
Dave

mr_otin · 10.06.2014

Hallo Ulli, Community,

das Problem wurde gelöst! Da ich schnell eine Lösung zur Hand brauche ist mir folgende Modul-Extension (Google-Suche) in die Hände gefallen.

JB DropDown Menü for Bootstrap

Link zum Download:

Dieses funktioniert nach Kundenwunsch (ohne Hackeln und klicken) mit Hover-Effekt. Vorteil dieser Lösung, es wird keine Jquery dazu geladen.

Ulli danke dir trotzdem für die Lösungsansätze! Nun muss ich mir alle Extensions anschauen, im Bezug auf Jquery, da das Problem weiterhin besteht das mehrere Instanzen geladen werden und für mich eine unsaubere Lösung darstellt (wiederverwendbarkeit!).

MfG
Dave