phpBB.de

Verfasst: **26.02.2018 10:20**

Wenn ich das jetzt mit Pastebin einfüge, ist es ja nach einer gewissen Zeit wieder weg - bin mit jetzt etwas unschlüssig.

Mein Versuch hat zwar geklappt, allerdings mit Kompromiss. Man kann keinen Background samt Border einfügen, sonst überlappt die column in kleinerer Auflösung. Responsive Anpassungsversuche haben bisher nicht geklappt. Aber so geht es ja auch. Mit Background und Border sah es allerdings besser aus.
Klappte allerdings nur mit zwei columns nebeneinander, 100% Breite sowie Scrollbar unten am Seitenende. Was dann wieder happig wird für die Responsive-Anpassung.
[ externes Bild ]

html

Code: Alles auswählen

 <div class="modern_bar">
  <a href="#home"><i class="icon fa-university fa-fw"></i>Portal</a>
  <a href="#news"><i class="icon fa-file-text fa-fw"></i>News</a>
  <div class="modern_drop">
    <button class="dropbtn">YOUR LINKS
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="modern_bar_content">
      <div class="modern_bar_header">
        <h2>YOUR MENU</h2>
      </div>
      <div class="bar_row">
        <div class="bar_column">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="bar_column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="bar_column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

css

Code: Alles auswählen

 /* Navbar container */
.modern_bar {
	overflow: hidden;
	background-color: transparent;
	font-family: Arial, sans serif;
	margin-top: 10px;
	border-top: 1px solid #777;
}

/* Links inside the navbar */
.modern_bar a {
	float: left;
	font-size: 10px;
	font-weight:800;
	text-transform:uppercase;
	color: #B5B5B5;
	text-align: center;
	padding: 8px;
	text-decoration: none;
}

/* The dropdown container */
.modern_drop {
	float: left;
	overflow: hidden;
}

/* Dropdown button */
.modern_drop .dropbtn {
	border: none;
	outline: none;
	font-size: 10px;
	font-weight:800;
	text-transform:uppercase;
	color: #B5B5B5;
	text-align: center;
	padding: 8px;
	text-decoration: none;  
	margin-top: 2px;
}

/* Add a red background color to navbar links on hover */
.modern_bar a:hover, .modern_bar_drop:hover .dropbtn, .modern_drop .dropbtn:hover{
	background-color: #BF0000;
}

/* Dropdown content (hidden by default) */
.modern_bar_content {
	display: none;
	position: absolute;
	background-color: transparent;
	width: 20%;
	min-width: 180px;
	left: 10%;
	z-index: 1;
	padding: 0 6px 6px 6px;
}

/* Mega Menu header, if needed */
.modern_bar .header {
	background: red;
	padding: 16px;
	color: #B5B5B5;
}

/* Show the dropdown menu on hover */
.modern_drop:hover .modern_bar_content {
	display: block;
}

.bar_column {
	float: middle;
	width: 99%;
	padding: 10px;
	background: #262223;
	background: -moz-linear-gradient(45deg, #262223 1%, #303032 41%, #303032 58%, #262223 100%);
	background: -webkit-linear-gradient(45deg, #262223 1%,#303032 41%,#303032 58%,#262223 100%);
	background: linear-gradient(45deg, #262223 1%,#303032 41%,#303032 58%,#262223 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262223', endColorstr='#262223',GradientType=1 );
	border: 1px solid #777;
	border-radius: 2px;
	-webkit-box-shadow: inset 0 0 12px #777, 0 0 12px rgba(0,0,0, .9);
	-moz-box-shadow: inset 0 0 12px #777, 0 0 12px rgba(0,0,0, .9);
	box-shadow: inset 0 0 12px #777, 0 0 12px rgba(0,0,0, .9);
	height: auto;
	max-width: 320px;
}

/* Style links inside the columns */
.bar_column a {
	float: none;
	color: #B5B5B5;
	padding: 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

/* Add a background color on hover */
.bar_column a:hover {
	background-color: #BF0000;
	color: #F9F9F9;
}

/* Clear floats after the columns */
.bar_row:after {
	content: "";
	display: table;
	clear: both;
}

.modern_bar_content  h3{
	margin-top:-1px;
}

.modern_bar_content  h2{
	color: #B5B5B5;
	font-family: Arial, sans serif;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	background: #262223;
	background: -moz-linear-gradient(45deg, #262223 1%, #303032 41%, #303032 58%, #262223 100%);
	background: -webkit-linear-gradient(45deg, #262223 1%,#303032 41%,#303032 58%,#262223 100%);
	background: linear-gradient(45deg, #262223 1%,#303032 41%,#303032 58%,#262223 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262223', endColorstr='#262223',GradientType=1 );
	border: 1px solid #777;
	border-radius: 2px;
	-webkit-box-shadow: inset 0 0 12px #777, 0 0 12px rgba(0,0,0, .9);
	-moz-box-shadow: inset 0 0 12px #777, 0 0 12px rgba(0,0,0, .9);
	box-shadow: inset 0 0 12px #777, 0 0 12px rgba(0,0,0, .9);
	margin: 5px 0 8px 0;
	padding: 3px;
}

.modern_bar .icon, .button .icon, blockquote cite::before, .uncited::before {
	display: initial;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: FontAwesome;
	font-size: 14px;
	line-height: 1;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

(Hoffe, das Ganze funktioniert auch noch, wenn ich Links einfüge

)

Verfasst: **26.02.2018 10:59**

Und da hast du jetzt welche Frage zu oder beantwortest welche Frage?

Irgendwie verstehe ich den Zusammenhang nicht.

In welche Dateien sollen deine Codebröckchen?

Verfasst: **26.02.2018 16:39**

Sorry Canonknipser - Ich dachte, vielleicht hätte ja jemand interresse an dem. Ich hab keine Frage diesbezüglich

Bei mir ist das in die top_modern.html eingefügt(after search header).

Verfasst: **01.06.2018 18:52**

Ich hab die letzten Tage mal andere Sachen ausprobiert - ohne outline wäre definitv besser.
Alle Dropdowns mit klick oder Hoverfuntion(Wie zBsp. Quicklinks geöffnete) haben mir den Style zerschossen

Diese hier wäre ganz gut https://www.w3schools.com/howto/howto_j ... opdown.asp Funktioniert auch alles bis auf den responsive Toggle.
Bevor ich weiter rumwurstle mal die grundsätzliche Frage: Geht das überhaupt ein JavaScript in den 3.2x Style einzubinden für die Link Navi?

Ausserdem, geht es evt. nicht, weil ich die Linknavi in den Top Modern einbauen wollte. Respektive müsste ich diese unter dem Top Modern in den Style einfügen?(Der top_modern ist ja eigentlich schon responsive)

Code: Alles auswählen

dropdown

habe ich natürlich in top-drop umbenannt. Sonst geht es logisch nicht. Allerdings, da der Link zu dem JavaScript in der css Datei ist - müsste ich das Script vielleicht im theme Ordner anstatt im template Ordner ablegen. Die Idee ist mir bisher nicht gekommen.
[ externes Bild ] Wie man sieht:
Toggle ist da - 3 Links aus der Linknavi entschwunden - alle Links aus dem Top Drop entschwunden(Script oder css muss ich noch irgendwie anpassen. Vergessen, dass ich da ja noch Titel einfügte) - der Toggle zeigt keine Reaktion

Ansonsten halt die Alternative installieren in Form von 1- 3 Dropups - das hat geklappt(sieht man in jeder Auflösung noch)

Bevor jetzt einer diesbezüglich was schreibt, Alternative ist klar: phpbb Button Menu ext von Oxpus https://phpbb3.oxpus.net/viewtopic.php?t=740 [ externes Bild ] Aber das ist dann eben der no kick Weg durch installation einer weiteren Ext

Edit: ich glaub ich brauch definitv eine neue Brille. Diese Variante hat ja auch den nicht zulässigen code

Code: Alles auswählen

outline: none;

Egal muss dann halt wieder geändert werden in den zulässigen Code von:

Code: Alles auswählen

/* :focus with outline: 0 and provides replacement treatment */
.top_drop .dropbtn a:focus {
	border: 1px solid red;
	outline: 0;
}

phpBB.de

Headerlinks im Style

Headerlinks im Style

Re: Headerlinks im Style

Re: Headerlinks im Style

Re: Headerlinks im Style