Navigation button nach Links versetzen

B

Bl4ck

Mitglied
Hallo,
Ich habe mir nun ein Mega Menü per CSS erstellt. Dies funktioniert auch ganz prima, nun habe ich allerdings eine Frage wo ich nicht weiter komme.
Momentan ist der Button für das Drop Down in der mitte, diesen möchte ich aber ca. 400px weiter nach links sitzen haben.
wie könnte ich das machen?
momentan sieht es für den button so aus im CSS

Code: 
nav2 > ul {
position: absolute;
display: flex;
justify-content: center;
width: 100%;
margin: 0 auto;
padding: 0;
}

wenn ich nun dieses justify-content: center; entferne, wird es ganz nach links geschoben und kriege es einfach nicht weiter nach rechts... änder ich was am margin oder padding , klappt es leider auch nicht. kann mir da einer helfen? Danke
 

Anhänge

  • Unbenannt-29.jpg
    Unbenannt-29.jpg
    434,5 KB · Aufrufe: 12
B

Bl4ck

Mitglied
Leider nein, habe flex-start; und alles versucht, bei start gehts halt ganze nach links und end halt ganz nach rechts^^.
Irgendwie müsste ich das angeben können mit px... :/ hmmmm einer noch ne idee?
 
B

Bl4ck

Mitglied
TM69 hat gesagt.:
hast du schon z.B.
Code: 
width: 400px !important
ausprobiert?
Zum Vergrößern anklicken....

leider klappt es auch nicht , naja , ich möchte es halt nicht in der mitte und auch nicht ganze am anfang, sondern genau dazwischen :)^^
hm ich hätte hier mal den ganze code eventuell hilft es ja...
Es wäre in Zeile 25 zu finden

Code: 
<html><style><body> {
}
* {
margin: 0;
padding: 0;
font-family: 'Roboto Condensed',arial,tahoma,clean,sans-serif;
text-transform: uppercase;
box-sizing: border-box;
}

nav2 {
position: absolute;
width: 100%;
background: #2a2a2a;
height: 58px;
font-size: 16px;
box-shadow: 0 0 10px rgba(0,0,0,1);
}

/* first stage */

nav2 > ul {
position: absolute;
display: flex;
justify-content: flex-start;
width: 100%;
margin: 0 auto;
padding: 0;
text-shadow: 5 5;
}

nav2 a {
display: block;
color: #fff;
text-decoration: none;
    text-shadow: 5 5;
}

nav2 ul li {
color: #fff;
list-style: none;
transition: 0.5s;
    text-shadow: 4 3;
}

nav2 > ul > li > a {
padding: 15px 25px;
}

nav2 ul > li.submenu2 > a:after {
position: relative;
float: right;
content: '';
margin-left: 10px;
margin-top: 8px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
border-bottom: 5px solid transparent;
}

nav2 ul > li.submenu2:hover > a:after {
margin-top: 2px;
border-top: 5px solid transparent;
border-bottom: 5px solid #fff;
}

nav2 > ul > li:hover {
background: #307d71;
}

/* second stage (the mega-menu) */

nav2 ul.megamenu2 {
position: absolute;
display: flex;
font-family: 'Ropa Sans', Helvetica, sans-serif;
text-transform: uppercase;
flex-wrap: wrap;
width: 100%;
top: -9999px;
left: 0;
padding: 40px 40px 0 40px;
background: #cccccc;
text-align: left;
border-top: 5px solid #307d71;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
z-index: 1;
}

nav2 ul li:hover ul.megamenu2 {
top: 100%;
}

/* third stage (child-menus in the mega-menu) */

nav2 ul.megamenu2 ul {
width: 25%;
margin-bottom: 40px;
color: #000;
box-shadow: none;
}

nav ul.megamenu2 h4 {
margin-bottom: 15px;
text-transform: uppercase;
}

nav2 ul.megamenu2 ul li {
display: block;
height: 37px;
    }

nav2 ul.megamenu2 ul li a {
margin-top: px;
transition: 0.5s;
height: 37px;
font-size: 19px;
color: #555555;
float: none;
left: 0;
color: #555;
padding: 5px;
text-decoration: none;
display: block;
text-align: left;
text-shadow: 0 0;
line-height: 140%;
font-weight: normal;
}

nav2 ul.megamenu2 ul li a:hover {
color: #000;
height: 37px;
background-color: #dddddd;
}

.ueberschrift {
padding: 0 0 0 3px;
font-size: 22px;
margin: 16px 0 10px;
font-weight: bold;
color: #000;
border-bottom: 2px solid #aaa;
text-shadow: 0 0;
font-family: 'Ropa Sans',Helvetica,sans-serif;
text-transform: uppercase;
    }
    </style>

<nav2>
<ul>
<li class="submenu2"><a href="#" title="Unser Produktsortiment">Spieler Treffpunkt</a>
<ul class="megamenu2">
<ul>
</ul>
<ul>
<h4 class="ueberschrift">Aktuelle Games</h4>
<li><a href="#">Apex Legends</a></li>
<li><a href="#">Die Sielder</a></li>
<li><a href="#">Age Of Empires 4</a></li>
<li><a href="#">Diablo 4</a></li>
<li><a href="#">Cyberpunk 2077</a></li>
</ul>
<ul>
<h4 class="ueberschrift">Infoseiten</h4>
<li><a href="#">Impressum</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Über Uns</a></li>
</ul>
</ul>
</li>
</ul>
</nav2></body></html><br><br><br><br>
 
B

Bl4ck

Mitglied
mihe7 hat gesagt.:
Du könntest z. B. im nav2 ein padding-left von 100px einfügen.
Zum Vergrößern anklicken....

Super ich danke dir, genau das hat gefehlt :). manchmal kann es sooo einfach sein xD.

Em noch was anderes, momentan geht es mit mouse hover , wenn ich das jetzt zu one Click machen möchte, müsste ich <script> einbauen richtig?
Wüsste einer bescheid wie ich das mache? das wäre zeile 153


@edit: ich habe in Zeile 91 aus hover, active gemacht, wenn ich nun klicke geht es aber sofort wieder weg , wie kann das zufällig bleiben das pull down^^
 
Zuletzt bearbeitet:
mihe7

mihe7

Top Contributor
Füg mal am Ende, unmittelbar vor dem </body>-Tag ein:
Java: 
<script>
'use strict';

document.querySelector("nav2 ul").addEventListener('click', _ => {
  let elem = document.querySelector("nav2 ul li ul.megamenu2");
  if (elem.style.top !== "100%") {
      elem.style.top = "100%";
  } else {
      elem.style.top = "";
  }
});
</script>
 
B

Bl4ck

Mitglied
mihe7 hat gesagt.:
Füg mal am Ende, unmittelbar vor dem </body>-Tag ein:
Java: 
<script>
'use strict';

document.querySelector("nav2 ul").addEventListener('click', _ => {
  let elem = document.querySelector("nav2 ul li ul.megamenu2");
  if (elem.style.top !== "100%") {
      elem.style.top = "100%";
  } else {
      elem.style.top = "";
  }
});
</script>
Zum Vergrößern anklicken....

super danke ! das hat geklappt, jetzt habe ich doch noch eins :D,
Wenn ich nun in den rot markierten klicke, schliesst sich dieses Pull down nicht, kriegt man das noch irgendwie hin?
 
mihe7

mihe7

Top Contributor
Ich meinte, ob das Menü geschlossen werden soll, wenn Du irgendwo außerhalb des Menüs klickst? Oder soll es nur geschlossen werden, wenn Du in Bereich des rot markierten Kreises klickst?
 
mihe7

mihe7

Top Contributor
Dann füg mal ein
Javascript: 
document.addEventListener('click', e => { 
  if (e.target.closest("nav2 ul") == null) {
    let elem = document.querySelector("nav2 ul li ul.megamenu2");
    elem.style.top = "";
  }
});
 
B

Bl4ck

Mitglied
Perfekt , ich danke dir ! Klappt super.

Kann es sein, dass der IE dieses Script nicht verarbeiten kann? dort geht es zum beispiel nicht, aber wenn es halt so ist, dann gehts halt im IE nicht :)
Danke
 
B

Bl4ck

Mitglied
Beim drauf klicken schon in der leiste , rot markiert, öffnet es nicht.
ist IE 11 gerade zum testen gewesen
 

Anhänge

  • Unbenannt-1.jpg
    Unbenannt-1.jpg
    966,6 KB · Aufrufe: 1
B

Bl4ck

Mitglied
Leider nein, hab das mal an oberste stelle gepackt
Code: 
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
aber da tut sich nix, naja
 
mihe7

mihe7

Top Contributor
Ah, IE11 unterstützt die Lambdas nicht. Dann schreibst einfach als function um.

Javascript: 
'use strict';

document.addEventListener('click', function(e) { 
  if (e.target.closest("nav2 ul") == null) {
    let elem = document.querySelector("nav2 ul li ul.megamenu2");
    elem.style.top = "";
  }
});

document.querySelector("nav2 ul").addEventListener('click', function() {
  let elem = document.querySelector("nav2 ul li ul.megamenu2");
  if (elem.style.top !== "100%") {
      elem.style.top = "100%";
  } else {
      elem.style.top = "";
  }
});
 
B

Bl4ck

Mitglied
hallo @mihe7 , ich muss leider nochmal stören / nerven xD.
Also mir ist aufgefallen , dass das Drop down menü HINTER meiner navigation verschwindet:
Unbenannt-8.jpg

wo ran könnte das liegen, bzw , könnte ich das beheben? Live: https://apexlegends-game.de

eventuell kannst du da nochmal helfen xD

grüße und schönen Sonntag allen noch
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
A Richtige technik für die navigation HTML / CSS 3
Avalon Löschen Button HTML HTML / CSS 39
Dimax HTML bei button click Formular an php senden aber andere seite öffnnen HTML / CSS 23
A Kontaktformular: Speichern Button soll nur weiterleiten, wenn alle Felder ausgefüllt sind HTML / CSS 17
T J Slider und Button HTML / CSS 1
C Je nach eingestellter Browsersprache Datum verändert ausgeben HTML / CSS 5
F die daten nach server HTML / CSS 0

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben