Lexi Help
Die neuesten Themen
» Impressum
von Bigtuber Heute um 19:10

» [phpBB2] Schriftfarbe in der Expressantwort
von Mariacher J.E. Heute um 19:09

» [phpBB2] Im Beitrag Bild und Text nebeneinander anzeigen
von Bigtuber Heute um 19:04

» Themen-Icons
von Donald Duck34 Heute um 18:59

» Themen fixieren
von Ray Heute um 18:09

» [Update] Neues Theme der mobilen Version V2
von inde Heute um 13:34

» Mein altes Forum zurückbekommen
von Bigtuber Gestern um 19:18

» Begriff : "merken"
von Ray Gestern um 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Gestern um 11:07

» Servamp Forum
von Raine Kamiya Mo 26 Sep 2016 - 22:47

» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Mo 26 Sep 2016 - 20:56

» Private Nachrichten
von inde Mo 26 Sep 2016 - 10:05

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde So 25 Sep 2016 - 22:24

» Ad Ware im Forum?
von inde So 25 Sep 2016 - 20:38

» [Sammelthread] Unangebrachte Werbung
von inde Fr 23 Sep 2016 - 9:00

» [phpBB2] Gruppen in der Wer is Online Anzeige "trennen"
von TheRollyJoger Mi 21 Sep 2016 - 10:49

Partner
free forum

Navigation pills mit dropdown menu

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt Navigation pills mit dropdown menu

Beitrag von Mazacre am Fr 28 Nov 2014 - 10:37

Hallo Forumieren Team  Very Happy

Nachdem ich endlich meine zweite und neue Navigationsleiste in meine Homepage eingebaut habe, möchte ich mich nun in die Navigationleiste ein Dropdown Menü einbauen.
Günther hatte mir auch schon gesagt das Ihr mir zu Dropdowns Styles usw nichts sagen könnt. Das ist für mich auch kein Problem.
Den ich habe soweit alles schon vorbereitet.

Ich habe das gesamte HTML-Gerüst und den CSS schon erstellt, das einzige Problem was ich nun habe, ist das ich es einfach nicht schaffe (viele Stunden sind schon vergangen) den Dropdown-Effekt herzubekommen.
Nach dem dieseser Dropdownstyle mit einem oder zwei Scripten nur funktioniert ist da nun mein großes Problem.

Als erstes zeige ich euch zu erst per Screen meine Navigationsleitse mit den markierten Dropdownfelder.



Und hier ist mein funktionierendes HTML Gerüst auf einer anderen Homepage
Dieses Gerüst funktioniert in einer anderen Homepage von mir ohne Probleme.
Natürlich weiß ich auch das ich den Code für meine Homepage hier bei Forumieren etwas anders gestallten muss.

Code:
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
      <h2>Pill with Dropdown Menu</h2>
      <ul class="nav nav-pills" role="tablist">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          Tutorials <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>                        
          </ul>
        </li>
      </ul>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>

</html>


Und das ist das HTML Gerüst im Template von Forumieren.

Code:
<div id="daddyleagues-menu">  
 <div class="navbar">
 <ul class="nav navbar-nav nav-pills">
                           <li class="active"><a href="http://www.maddenonlineleague.com/">Home</a>  </li>
                                <li><a href="http://www.daddyleagues.com/mof/frontoffice">Front Office</a></li>
 <li><a href="http://www.maddenonlineleague.com/t3-head-coaches-und-owners">Coaches</a> </li>
                          
                                <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Stats <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                <li><a href="http://www.daddyleagues.com/mof/stats/team">Team</a></li>
                                <li><a href="http://www.daddyleagues.com/mof/stats/player">Player</a></li>
                                <li><a href="http://www.daddyleagues.com/mof/stats/rookie">Rookies</a></li>
                                </ul>
                                </li>
                                <li><a href="http://www.daddyleagues.com/mof/players">Players</a> </li>
 <li><a href="http://www.daddyleagues.com/mof/schedules">Schedules</a> </li>
                                <li><a href="http://www.daddyleagues.com/mof/teams">Teams</a> </li>
                          
                                <li class="dropdown  ">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Standings<b class="caret"></b></a>
                                <ul class="dropdown-menu"role="menu" aria-labelledby="dropdownMenu"> <li><a href="http://www.daddyleagues.com/mof/standings">Division</a></li>
 <li><a href="http://www.daddyleagues.com/mof/standings/conference">Conference</a></li>
 <li><a href="http://www.daddyleagues.com/mof/standings/league">League</a></li>
        <li class="divider"></li>
 <li><a href="http://www.daddyleagues.com/mof/standing/ranking">Ranking</a></li>
        </ul>
 </li>
 <li><a href="http://www.maddenonlineleague.com/forum">Forum</a></li>
 <li><a href="http://www.maddenonlineleague.com/f12-breaking-news">Teamblog</a> </li>
 <li><a href="http://www.maddenonlineleague.com/t2-madden-online-liga-regelwerk">MOL-Rules</a> </li>
                                </ul>  
                        </div>
                                </div>

Ihr seht also das ich in dem oberen HTML Code einen bootstrap 3.2.0 CSS drinn habe und unterhalb zwei Scripte

Bootstrap <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

Script.1  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Script.2  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Ich habe auch schon alles ausprobiert auf Forumieren (Javascript angelegt usw) aber der Dropdown Effekt will einfach nicht erscheinen. Ich verstehe das nicht.


Ich muss aber auch ganz ehrlich sagen ich kenne mich zwar mit HTML und CSS aus aber Bootstrap und Scripten lerne ich gerade bzw versuche es mir selber bei zu bringen.

Ich denke mein Fehler liegt daran das ich nicht genau weiß wo ich diese Scripte in das Overall_Header Template einsetzen muss.

Vielleicht könnt Ihr mir mal zeigen wo ich dieses Bootstarp und die Scripte einbauen bzw einsetzen muss.


Zuletzt von Mazacre am Sa 29 Nov 2014 - 15:36 bearbeitet, insgesamt 1 mal bearbeitet

Mazacre
Lehrling
Lehrling

Männlich Beiträge : 118
Anmeldedatum : 12.12.12

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Navigation pills mit dropdown menu

Beitrag von Günther am Sa 29 Nov 2014 - 13:52

Hallo,

ich beschreibe dir mal ausgehend von einem unveränderten Template, wie du vorgehen musst. Wink
Du gehst in die Templates zu
AB -> Anzeige -> Templates -> Allgemeines -> overall_header
und suchst dort folgende Stelle:
<div class="navbar">
<div class="inner"><span class="corners-top"><span></span></span>

<ul class="linklist navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>


<!-- BEGIN switch_search_box -->
Den rot markierten Bereich ersetzt du durch dein HTML-Navigerüst:
Code:
<div id="daddyleagues-menu"> 
 <div class="navbar">
 <ul class="nav navbar-nav nav-pills">
                          <li class="active"><a href="http://www.maddenonlineleague.com/">Home</a>  </li>
                                <li><a href="http://www.daddyleagues.com/mof/frontoffice">Front Office</a></li>
 <li><a href="http://www.maddenonlineleague.com/t3-head-coaches-und-owners">Coaches</a> </li>
                         
                                <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Stats <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                <li><a href="http://www.daddyleagues.com/mof/stats/team">Team</a></li>
                                <li><a href="http://www.daddyleagues.com/mof/stats/player">Player</a></li>
                                <li><a href="http://www.daddyleagues.com/mof/stats/rookie">Rookies</a></li>
                                </ul>
                                </li>
                                <li><a href="http://www.daddyleagues.com/mof/players">Players</a> </li>
 <li><a href="http://www.daddyleagues.com/mof/schedules">Schedules</a> </li>
                                <li><a href="http://www.daddyleagues.com/mof/teams">Teams</a> </li>
                         
                                <li class="dropdown  ">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Standings<b class="caret"></b></a>
                                <ul class="dropdown-menu"role="menu" aria-labelledby="dropdownMenu"> <li><a href="http://www.daddyleagues.com/mof/standings">Division</a></li>
 <li><a href="http://www.daddyleagues.com/mof/standings/conference">Conference</a></li>
 <li><a href="http://www.daddyleagues.com/mof/standings/league">League</a></li>
        <li class="divider"></li>
 <li><a href="http://www.daddyleagues.com/mof/standing/ranking">Ranking</a></li>
        </ul>
 </li>
 <li><a href="http://www.maddenonlineleague.com/forum">Forum</a></li>
 <li><a href="http://www.maddenonlineleague.com/f12-breaking-news">Teamblog</a> </li>
 <li><a href="http://www.maddenonlineleague.com/t2-madden-online-liga-regelwerk">MOL-Rules</a> </li>
                                </ul> 
                        </div>
                                </div>
Danach sendest du das veränderte Template ab und veröffentlichst es über einen Klick auf plus.

Dann füge in dein CSS-Stylesheet unter
AB -> Anzeige -> Bilder & Farben -> Farben -> Reiter "CSS Stylesheet"
folgenden Code ein:
Code:
/* Standard-CSS für die Navigation ANFANG */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.dropdown {
    position: relative;
}

.dropdown-toggle:focus {
    outline: 0;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.dropdown-menu.pull-right {
    right: 0;
    left: auto;
}

.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}

.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus {
    color: #fff;
    text-decoration: none;
    background-color: #428bca;
    outline: 0;
}

.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus {
    color: #777;
}

.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus {
    text-decoration: none;
    cursor: not-allowed;
    background-color: transparent;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.open>.dropdown-menu {
    display: block;
}

.open>a {
    outline: 0;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

.dropdown-menu-left {
    right: auto;
    left: 0;
}

.dropdown-header {
    display: block;
    padding: 3px 20px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #777;
    white-space: nowrap;
}

.dropdown-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 990;
}

.pull-right>.dropdown-menu {
    right: 0;
    left: auto;
}

.dropup .caret,.navbar-fixed-bottom .dropdown .caret {
    content: "";
    border-top: 0;
    border-bottom: 4px solid;
}

.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 1px;
}

@media (min-width:768px) {
    .navbar-right .dropdown-menu {
        right: 0;
        left: auto;
    }

    .navbar-right .dropdown-menu-left {
        right: auto;
        left: 0;
    }
}

.btn-group,.btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.btn-group>.btn,.btn-group-vertical>.btn {
    position: relative;
    float: left;
}

.btn-group>.btn:hover,.btn-group-vertical>.btn:hover,.btn-group>.btn:focus,.btn-group-vertical>.btn:focus,.btn-group>.btn:active,.btn-group-vertical>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn.active {
    z-index: 2;
}

.btn-group>.btn:focus,.btn-group-vertical>.btn:focus {
    outline: 0;
}

.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group {
    margin-left: -1px;
}

.btn-toolbar {
    margin-left: -5px;
}

.btn-toolbar .btn-group,.btn-toolbar .input-group {
    float: left;
}

.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group {
    margin-left: 5px;
}

.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.btn-group>.btn:first-child {
    margin-left: 0;
}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group>.btn-group {
    float: left;
}

.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn {
    border-radius: 0;
}

.btn-group>.btn-group:first-child>.btn:last-child,.btn-group>.btn-group:first-child>.dropdown-toggle {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group>.btn-group:last-child>.btn:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle {
    outline: 0;
}

.btn-group>.btn+.dropdown-toggle {
    padding-right: 8px;
    padding-left: 8px;
}

.btn-group>.btn-lg+.dropdown-toggle {
    padding-right: 12px;
    padding-left: 12px;
}

.btn-group.open .dropdown-toggle {
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.btn-group.open .dropdown-toggle.btn-link {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn .caret {
    margin-left: 0;
}

.btn-lg .caret {
    border-width: 5px 5px 0;
    border-bottom-width: 0;
}

.dropup .btn-lg .caret {
    border-width: 0 5px 5px;
}

.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
}

.btn-group-vertical>.btn-group>.btn {
    float: none;
}

.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group {
    margin-top: -1px;
    margin-left: 0;
}

.btn-group-vertical>.btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.btn-group-vertical>.btn:first-child:not(:last-child) {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group-vertical>.btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
}

.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn {
    border-radius: 0;
}

.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}

.btn-group-justified>.btn,.btn-group-justified>.btn-group {
    display: table-cell;
    float: none;
    width: 1%;
}

.btn-group-justified>.btn-group .btn {
    width: 100%;
}

.btn-group-justified>.btn-group .dropdown-menu {
    left: auto;
}

[data-toggle=buttons]>.btn>input[type=radio],[data-toggle=buttons]>.btn>input[type=checkbox] {
    position: absolute;
    z-index: -1;
    filter: alpha(opacity=0);
    opacity: 0;
}

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

.input-group[class*=col-] {
    float: none;
    padding-right: 0;
    padding-left: 0;
}

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}

select.input-group-lg>.form-control,select.input-group-lg>.input-group-addon,select.input-group-lg>.input-group-btn>.btn {
    height: 46px;
    line-height: 46px;
}

textarea.input-group-lg>.form-control,textarea.input-group-lg>.input-group-addon,textarea.input-group-lg>.input-group-btn>.btn,select[multiple].input-group-lg>.form-control,select[multiple].input-group-lg>.input-group-addon,select[multiple].input-group-lg>.input-group-btn>.btn {
    height: auto;
}

.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

select.input-group-sm>.form-control,select.input-group-sm>.input-group-addon,select.input-group-sm>.input-group-btn>.btn {
    height: 30px;
    line-height: 30px;
}

textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon,textarea.input-group-sm>.input-group-btn>.btn,select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.input-group-addon,select[multiple].input-group-sm>.input-group-btn>.btn {
    height: auto;
}

.input-group-addon,.input-group-btn,.input-group .form-control {
    display: table-cell;
}

.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.input-group-addon,.input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.input-group-addon.input-sm {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

.input-group-addon.input-lg {
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
}

.input-group-addon input[type=radio],.input-group-addon input[type=checkbox] {
    margin-top: 0;
}

.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-addon:first-child {
    border-right: 0;
}

.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:first-child>.btn-group:not(:first-child)>.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-addon:last-child {
    border-left: 0;
}

.input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;
}

.input-group-btn>.btn {
    position: relative;
}

.input-group-btn>.btn+.btn {
    margin-left: -1px;
}

.input-group-btn>.btn:hover,.input-group-btn>.btn:focus,.input-group-btn>.btn:active {
    z-index: 2;
}

.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group {
    margin-right: -1px;
}

.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group {
    margin-left: -1px;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav>li {
    position: relative;
    display: block;
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

.nav>li>a:hover,.nav>li>a:focus {
    text-decoration: none;
    background-color: #eee;
}

.nav>li.disabled>a {
    color: #777;
}

.nav>li.disabled>a:hover,.nav>li.disabled>a:focus {
    color: #777;
    text-decoration: none;
    cursor: not-allowed;
    background-color: transparent;
}

.nav .open>a,.nav .open>a:hover,.nav .open>a:focus {
    background-color: #eee;
    border-color: #428bca;
}

.nav .nav-divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

.nav>li>a>img {
    max-width: none;
}

.nav-tabs {
    border-bottom: 1px solid #ddd;
}

.nav-tabs>li {
    float: left;
    margin-bottom: -1px;
}

.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}

.nav-tabs>li>a:hover {
    border-color: #eee #eee #ddd;
}

.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.nav-tabs.nav-justified {
    width: 100%;
    border-bottom: 0;
}

.nav-tabs.nav-justified>li {
    float: none;
}

.nav-tabs.nav-justified>li>a {
    margin-bottom: 5px;
    text-align: center;
}

.nav-tabs.nav-justified>.dropdown .dropdown-menu {
    top: auto;
    left: auto;
}

@media (min-width:768px) {
    .nav-tabs.nav-justified>li {
        display: table-cell;
        width: 1%;
    }

    .nav-tabs.nav-justified>li>a {
        margin-bottom: 0;
    }
}

.nav-tabs.nav-justified>li>a {
    margin-right: 0;
    border-radius: 4px;
}

.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus {
    border: 1px solid #ddd;
}

@media (min-width:768px) {
    .nav-tabs.nav-justified>li>a {
        border-bottom: 1px solid #ddd;
        border-radius: 4px 4px 0 0;
    }

    .nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus {
        border-bottom-color: #fff;
    }
}

.nav-pills>li {
    float: left;
}

.nav-pills>li>a {
    border-radius: 4px;
}

.nav-pills>li+li {
    margin-left: 2px;
}

.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus {
    color: #fff;
    background-color: #428bca;
}

.nav-stacked>li {
    float: none;
}

.nav-stacked>li+li {
    margin-top: 2px;
    margin-left: 0;
}

.nav-justified {
    width: 100%;
}

.nav-justified>li {
    float: none;
}

.nav-justified>li>a {
    margin-bottom: 5px;
    text-align: center;
}

.nav-justified>.dropdown .dropdown-menu {
    top: auto;
    left: auto;
}

@media (min-width:768px) {
    .nav-justified>li {
        display: table-cell;
        width: 1%;
    }

    .nav-justified>li>a {
        margin-bottom: 0;
    }
}

.nav-tabs-justified {
    border-bottom: 0;
}

.nav-tabs-justified>li>a {
    margin-right: 0;
    border-radius: 4px;
}

.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:hover,.nav-tabs-justified>.active>a:focus {
    border: 1px solid #ddd;
}

@media (min-width:768px) {
    .nav-tabs-justified>li>a {
        border-bottom: 1px solid #ddd;
        border-radius: 4px 4px 0 0;
    }

    .nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:hover,.nav-tabs-justified>.active>a:focus {
        border-bottom-color: #fff;
    }
}

.tab-content>.tab-pane {
    display: none;
}

.tab-content>.active {
    display: block;
}

.nav-tabs .dropdown-menu {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

@media (min-width:768px) {
    .navbar {
        border-radius: 4px;
    }
}

@media (min-width:768px) {
    .navbar-header {
        float: left;
    }
}

.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.navbar-collapse.in {
    overflow-y: auto;
}

@media (min-width:768px) {
    .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .navbar-collapse.collapse {
        display: block!important;
        height: auto!important;
        padding-bottom: 0;
        overflow: visible!important;
    }

    .navbar-collapse.in {
        overflow-y: visible;
    }

    .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
    }
}

.navbar-fixed-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse {
    max-height: 340px;
}

@media (max-width:480px) and (orientation:landscape) {
    .navbar-fixed-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse {
        max-height: 200px;
    }
}

.container>.navbar-header,.container-fluid>.navbar-header,.container>.navbar-collapse,.container-fluid>.navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
}

@media (min-width:768px) {
    .container>.navbar-header,.container-fluid>.navbar-header,.container>.navbar-collapse,.container-fluid>.navbar-collapse {
        margin-right: 0;
        margin-left: 0;
    }
}

.navbar-static-top {
    z-index: 1000;
    border-width: 0 0 1px;
}

@media (min-width:768px) {
    .navbar-static-top {
        border-radius: 0;
    }
}

.navbar-fixed-top,.navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    -webkit-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

@media (min-width:768px) {
    .navbar-fixed-top,.navbar-fixed-bottom {
        border-radius: 0;
    }
}

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}

.navbar-fixed-bottom {
    bottom: 0;
    margin-bottom: 0;
    border-width: 1px 0 0;
}

.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}

.navbar-brand:hover,.navbar-brand:focus {
    text-decoration: none;
}

@media (min-width:768px) {
    .navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand {
        margin-left: -15px;
    }
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.navbar-toggle:focus {
    outline: 0;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px;
}

@media (min-width:768px) {
    .navbar-toggle {
        display: none;
    }
}

.navbar-nav {
    margin: 7.5px -15px;
}

.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}

@media (max-width:767px) {
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .navbar-nav .open .dropdown-menu>li>a,.navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 5px 15px 5px 25px;
    }

    .navbar-nav .open .dropdown-menu>li>a {
        line-height: 20px;
    }

    .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-nav .open .dropdown-menu>li>a:focus {
        background-image: none;
    }
}

@media (min-width:768px) {
    .navbar-nav {
        float: left;
        margin: 0;
    }

    .navbar-nav>li {
        float: left;
    }

    .navbar-nav>li>a {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .navbar-nav.navbar-right:last-child {
        margin-right: -15px;
    }
}

@media (min-width:768px) {
    .navbar-left {
        float: left!important;
    }

    .navbar-right {
        float: right!important;
    }
}

.navbar-form {
    padding: 10px 15px;
    margin-top: 8px;
    margin-right: -15px;
    margin-bottom: 8px;
    margin-left: -15px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
}

@media (min-width:768px) {
    .navbar-form .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }

    .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }

    .navbar-form .input-group {
        display: inline-table;
        vertical-align: middle;
    }

    .navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn,.navbar-form .input-group .form-control {
        width: auto;
    }

    .navbar-form .input-group>.form-control {
        width: 100%;
    }

    .navbar-form .control-label {
        margin-bottom: 0;
        vertical-align: middle;
    }

    .navbar-form .radio,.navbar-form .checkbox {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle;
    }

    .navbar-form .radio label,.navbar-form .checkbox label {
        padding-left: 0;
    }

    .navbar-form .radio input[type=radio],.navbar-form .checkbox input[type=checkbox] {
        position: relative;
        margin-left: 0;
    }

    .navbar-form .has-feedback .form-control-feedback {
        top: 0;
    }
}

@media (max-width:767px) {
    .navbar-form .form-group {
        margin-bottom: 5px;
    }
}

@media (min-width:768px) {
    .navbar-form {
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .navbar-form.navbar-right:last-child {
        margin-right: -15px;
    }
}

.navbar-nav>li>.dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.navbar-btn {
    margin-top: 8px;
    margin-bottom: 8px;
}

.navbar-btn.btn-sm {
    margin-top: 10px;
    margin-bottom: 10px;
}

.navbar-btn.btn-xs {
    margin-top: 14px;
    margin-bottom: 14px;
}

.navbar-text {
    margin-top: 15px;
    margin-bottom: 15px;
}

@media (min-width:768px) {
    .navbar-text {
        float: left;
        margin-right: 15px;
        margin-left: 15px;
    }

    .navbar-text.navbar-right:last-child {
        margin-right: 0;
    }
}

.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

.navbar-default .navbar-brand {
    color: #777;
}

.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus {
    color: #5e5e5e;
    background-color: transparent;
}

.navbar-default .navbar-text {
    color: #777;
}

.navbar-default .navbar-nav>li>a {
    color: #777;
}

.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus {
    color: #333;
    background-color: transparent;
}

.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus {
    color: #555;
    background-color: #e7e7e7;
}

.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:hover,.navbar-default .navbar-nav>.disabled>a:focus {
    color: #ccc;
    background-color: transparent;
}

.navbar-default .navbar-toggle {
    border-color: #ddd;
}

.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus {
    background-color: #ddd;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #888;
}

.navbar-default .navbar-collapse,.navbar-default .navbar-form {
    border-color: #e7e7e7;
}

.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus {
    color: #555;
    background-color: #e7e7e7;
}

@media (max-width:767px) {
    .navbar-default .navbar-nav .open .dropdown-menu>li>a {
        color: #777;
    }

    .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
        color: #333;
        background-color: transparent;
    }

    .navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
        color: #555;
        background-color: #e7e7e7;
    }

    .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus {
        color: #ccc;
        background-color: transparent;
    }
}

.navbar-default .navbar-link {
    color: #777;
}

.navbar-default .navbar-link:hover {
    color: #333;
}

.navbar-default .btn-link {
    color: #777;
}

.navbar-default .btn-link:hover,.navbar-default .btn-link:focus {
    color: #333;
}

.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:hover,.navbar-default .btn-link[disabled]:focus,fieldset[disabled] .navbar-default .btn-link:focus {
    color: #ccc;
}

.navbar-inverse {
    background-color: #222;
    border-color: #080808;
}

.navbar-inverse .navbar-brand {
    color: #777;
}

.navbar-inverse .navbar-brand:hover,.navbar-inverse .navbar-brand:focus {
    color: #fff;
    background-color: transparent;
}

.navbar-inverse .navbar-text {
    color: #777;
}

.navbar-inverse .navbar-nav>li>a {
    color: #777;
}

.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus {
    color: #fff;
    background-color: transparent;
}

.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>.active>a:focus {
    color: #fff;
    background-color: #080808;
}

.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:hover,.navbar-inverse .navbar-nav>.disabled>a:focus {
    color: #444;
    background-color: transparent;
}

.navbar-inverse .navbar-toggle {
    border-color: #333;
}

.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus {
    background-color: #333;
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form {
    border-color: #101010;
}

.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a:focus {
    color: #fff;
    background-color: #080808;
}

@media (max-width:767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header {
        border-color: #080808;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
        background-color: #080808;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
        color: #777;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {
        color: #fff;
        background-color: transparent;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus {
        color: #fff;
        background-color: #080808;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus {
        color: #444;
        background-color: transparent;
    }
}

.navbar-inverse .navbar-link {
    color: #777;
}

.navbar-inverse .navbar-link:hover {
    color: #fff;
}

.navbar-inverse .btn-link {
    color: #777;
}

.navbar-inverse .btn-link:hover,.navbar-inverse .btn-link:focus {
    color: #fff;
}

.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:hover,.navbar-inverse .btn-link[disabled]:focus,fieldset[disabled] .navbar-inverse .btn-link:focus {
    color: #444;
}
/* Standard-CSS für die Navigation ENDE */


Zuletzt stellst du unter
AB -> Module -> HTML und JAVASCRIPT -> Javascript Codes Verwaltung
folgende Einstellung sicher:
Die Javascript-Code Verwaltung aktivieren: Ja

Dann erstellst du über Ein neues Javascript erstellen ein Script mit
Titel: Navigation
Platzierung: Auf allen Seiten
Javascript Code:
Code:
$.getScript("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js");

Liebe Grüße
Günther

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Navigation pills mit dropdown menu

Beitrag von Günther am Sa 29 Nov 2014 - 15:24

Ich sehe, dass die Navigation jetzt in deinem Forum eingesetzt ist und funktioniert.
Also können wir hier schließen? Smile

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Navigation pills mit dropdown menu

Beitrag von Mazacre am Sa 29 Nov 2014 - 15:35

Hallo Günther ich möchte mich bei Dir bedanken für deine sehr große hilfe danke nochmal danke du bist der beste bzw Ihr seit die besten.
Go Forumieren Team.
Ich schließe hier danke nochmal.

Mazacre
Lehrling
Lehrling

Männlich Beiträge : 118
Anmeldedatum : 12.12.12

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten