Navigation button nach Links versetzen

Diskutiere Navigation button nach Links versetzen im HTML / CSS / JScript / AJAX Bereich.
B

Bl4ck

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

MoxxiManagarm

MoxxiManagarm

Du könntest versuchen ob dir justify-content: flex-end; was taugt.
 
B

Bl4ck

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

hast du schon z.B.
Code:
width: 400px !important
ausprobiert?
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

Du könntest z. B. im nav2 ein padding-left von 100px einfügen.
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

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

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>
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

Meinst Du, wenn Du außerhalb des Menüs klickst oder wenn Du in den Bereich des roten Kreises klickst?
 
mihe7

mihe7

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?
 
B

Bl4ck

nein es sollte geschlossen werden , wenn man komplett ausserhalb klickt :), also jeder Bereich
 
mihe7

mihe7

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

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
 
mihe7

mihe7

Was funktioniert nicht? Das Öffnen oder nur das Schließen? Welche IE-Version?
 
Thema: 

Navigation button nach Links versetzen

Passende Stellenanzeigen aus deiner Region:
Anzeige

Neue Themen

Anzeige

Anzeige
Oben