Zum Inhalt springen

Bootstrap - Submenüpunkt funktioniert nicht richtig

Erstellt am 6. Juli 2013 · 3 Antworten · letzte Antwort am 24. Januar 2014

Tags: Bootstrap, HTML & CSS, Frage

Climber ·

Hallo Zusammen,
ich verwende erstmalig für eine Seite dass Bootstrap - allerdings nicht die EXT sondern "zu Fuss" eingebunden 😃

Das ganze lässt sich wunderbar am PC bedienen - jedoch kann ich die Submenüpunkte weder am iPad noch auf einem Smartphone richtig anklicken...beim Touch geht das Submenü wieder zu und nix passiert?! :o:o

Der Link zur Seite: www.fmc-gablingen.de

Vielleicht kann mir dabei jemand helfen?

Vielen vielen Dank schon mal

Folgendes TS:

menu.top = HMENU
    menu.top {

    #includeNotInMenu = 0
  
    # Create a menu out of the pages specifically listed under special.value
    special = directory
    special.value = {$menu.top.pages}
    
    1 = TMENU
    1 {
    expAll = 1

    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title

    ACT = 1
    ACT.wrapItemAndSub = <li>|</li>
    ACT.ATagTitle.field = abstract // description // title

    IFSUB = 1
    IFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    IFSUB.after = <b class="caret"></b></a>
    IFSUB.doNotLinkIt = 1
    IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
    IFSUB.ATagTitle.field = abstract // description // title

    ACTIFSUB = 0
    ACTIFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    ACTIFSUB.after = <b class="caret"></b></a>
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.wrapItemAndSub = <li class="dropdown">|</li>
    ACTIFSUB.ATagTitle.field = abstract // description // title

    wrap = <ul class="nav">|</ul>
    }

    2 = TMENU
    2 {
    expAll = 1

    ACT = 1
    ACT.wrapItemAndSub = <li>|</li>
    ACT.ATagTitle.field = abstract // description // title

    ACTIFSUB = 1
    ACTIFSUB.wrapItemAndSub = |
    ACTIFSUB.before = <li class="divider"></li><li class="nav-header">
    ACTIFSUB.after = </li>
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.ATagTitle.field = abstract // description // title

    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title

    IFSUB = 1
    IFSUB.before = <li class="divider"></li><li class="nav-header">
    IFSUB.after = </li>
    IFSUB.doNotLinkIt = 1
    IFSUB.ATagTitle.field = abstract // description // title

    SPC = 1
    SPC.allWrap = <li class="divider"></li><li class="nav-header">|</li>

    wrap = <ul class="dropdown-menu" role="menu">|</ul>
    }

    3 = TMENU
    3 {
      expAll = 1
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title

    ACT = 1
    ACT.wrapItemAndSub = <li>|</li>
    ACT.ATagTitle.field = abstract // description // title
    }
    }

Das HTML-Template sieht so aus:

	<header>
		<div id="navbox">
			<f:cObject typoscriptObjectPath="lib.logo" />
			<div class="navbar navbar-inverse navbar-fixed-top">
				<div>
				<div>
					<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<div class="nav-collapse collapse">
						<nav id="nav-top">
							<f:cObject typoscriptObjectPath="menu.top" />
						</nav>
					</div><!--/.nav-collapse -->
				</div>
				</div>
			</div>
				
		</div>
	</header>
etux ·
Climber schrieb

Das ganze lässt sich wunderbar am PC bedienen ...

Ich verstehe nicht, wie Du die beinahe katastrophale CSS-Formatierung der Website übersiehst.
Einzig der Chrome, aber auch nur bei bestimmten Fensterbreiten, stellt die Site halbwegs vernünftig dar.
Ich habe mir allerdings nur die CSS-Formatierung vom „header“ kurz angeschaut. Die alleine ist aber schon schlecht genug (auch als Basis für weitere Probleme).

jenses ·

Die Reihenfolge der Stylesheeteinbindung ist völlig falsch - du lädst erst die Styles für slider, powermail etc., um dann hinterher mit reset.css alles wieder zu überschreiben...

melody ·

Ich habe das genau selbe Problem. Das TypoScript stimmt überein mit dem obigen. Die Submenüpunkte sind auf Touchscreens nicht klickbar. Leider haben mir die Antworten nicht weitergeholfen. Climber, vielleicht könntest Du verraten wie Du das Problem gelöst hast!? Es funktioniert ja jetzt offensichtlich bei Dir.