StartseiteTeammitglieder online
Regeln und nützliche Hinweise
Neueste Themen
» Das Plauderforum ist zurück!von Eto Mo 25 Nov 2024 - 17:59
» Style-Wechsel funktioniert nicht mehr
von Miho Mo 25 Nov 2024 - 11:05
» Profil in beiträgen nur im blog deaktivieren.
von Skouliki Mo 25 Nov 2024 - 10:16
» [Invision] Editor über den Bildrand ziehbar + Schriftgrößenproblem
von Skouliki Mi 20 Nov 2024 - 8:06
» Passwort für meinen Adminbereich vergessen.
von Joost Sa 9 Nov 2024 - 10:13
» [Invision] Signatur wird nicht immer eingefügt
von Skouliki Mo 4 Nov 2024 - 16:33
» [Invision] Schriftgröße Navigationsleiste, Links und Forenbeschreibungen
von Skouliki So 27 Okt 2024 - 13:29
» [Invision] Transparent Logohintergrund/Struktur
von Joost So 27 Okt 2024 - 12:58
» png wird im servimg in ein jpg umgewandelt
von Skouliki Mi 23 Okt 2024 - 20:26
» Passwort Vergessen (SilentHowl)
von Joost Do 17 Okt 2024 - 17:14
» [Invision] Hintergrundbild fixieren
von Skouliki Mo 14 Okt 2024 - 11:30
» Paßwort vergessen
von Joost So 13 Okt 2024 - 17:58
» Anti-Spam-Prüfung
von Hana19 Sa 12 Okt 2024 - 16:59
» Private Nachrichten bleiben im Postausgang hängen
von Skouliki Fr 11 Okt 2024 - 11:11
» [phpBB3] Mittelteil des Forums verschoben
von Eto Mo 7 Okt 2024 - 20:50
» [phpBB3] Farbpalette ändern
von Skouliki Mo 7 Okt 2024 - 10:08
» [Klassische Version] Account löschen
von Joost Sa 5 Okt 2024 - 21:05
» Chatbox einloggen nicht möglich
von Joost So 29 Sep 2024 - 8:01
Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Agorass in Passwort für meinen Adminbereich vergessen. ( 2 )
» Beitrag von Keks in [phpBB2] Unterforen Nebeneinander
( 1 )
Navigation pills mit dropdown menu
2 verfasser
Das Forum der Foren :: Hilfe und Unterstützung :: Probleme mit Scripten oder Codes :: Probleme mit Scripten oder Codes - Archiv
Seite 1 von 1 • Teilen
Navigation pills mit dropdown menu
von Mazacre Fr 28 Nov 2014 - 10:37
Hallo Forumieren Team 
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.
Und das ist das HTML Gerüst im Template von Forumieren.
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.
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- Geselle
-
Beiträge : 133
Anmeldedatum : 12.12.12
Re: Navigation pills mit dropdown menu
von Günther Sa 29 Nov 2014 - 13:52
Hallo,
ich beschreibe dir mal ausgehend von einem unveränderten Template, wie du vorgehen musst.
Du gehst in die Templates zu
AB -> Anzeige -> Templates -> Allgemeines -> overall_header
und suchst dort folgende Stelle:
.
Dann füge in dein CSS-Stylesheet unter
AB -> Anzeige -> Bilder & Farben -> Farben -> Reiter "CSS Stylesheet"
folgenden Code ein:
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:
Liebe Grüße
Günther
ich beschreibe dir mal ausgehend von einem unveränderten Template, wie du vorgehen musst.
Du gehst in die Templates zu
AB -> Anzeige -> Templates -> Allgemeines -> overall_header
und suchst dort folgende Stelle:
Den rot markierten Bereich ersetzt du durch dein HTML-Navigerüst:<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 -->
- 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>
.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.
- Beiträge : 15349
Anmeldedatum : 16.07.08
Re: Navigation pills mit dropdown menu
von Günther 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?
Also können wir hier schließen?
Günther- Admin a.D.
- Beiträge : 15349
Anmeldedatum : 16.07.08
Re: Navigation pills mit dropdown menu
von Mazacre 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.
Go Forumieren Team.
Ich schließe hier danke nochmal.
Mazacre- Geselle
- Beiträge : 133
Anmeldedatum : 12.12.12
Ähnliche Themen» Dropdown Menü
» [phpBB3] Dropdown Menü einpflegen in Template
» Problem mit Dropdown Menü
» [phpBB2] Dropdown-Menü
» [phpBB2] Links in Dropdown Leiste funktionieren nicht
» [phpBB3] Dropdown Menü einpflegen in Template
» Problem mit Dropdown Menü
» [phpBB2] Dropdown-Menü
» [phpBB2] Links in Dropdown Leiste funktionieren nicht
Das Forum der Foren :: Hilfe und Unterstützung :: Probleme mit Scripten oder Codes :: Probleme mit Scripten oder Codes - Archiv
Seite 1 von 1
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten
