Forum: PC-Programmierung html/css arrow-down an menü-item binden


von Matthias S. (Gast)


Lesenswert?

Hallo,

bei einem dropdown-menü soll dem Nutzer ein Pfeil signalisieren, hier 
gibt es was zum Aufklappen. Funktioniert soweit, nur seht Ihr 
wahrscheinlich, was das Problem ist. Aktuell gebe ich in der css Datei 
eine pixelgenaue Position an, was auf dem einen System so und dem 
anderen so aussieht.

Ich würde das gerne anders machen und den arrow direkt an das erste div 
mit der Klasse menü binden. Frage, geht das überhaupt oder wie würdet 
Ihr so einen arrow implementieren, wenn nicht so?
1
<div class="menue">links<div class="arrow-down"></div>...</div>
2
3
.arrow-down
4
{
5
  width: 0; 
6
  height: 0; 
7
  position: absolute;
8
  top: 100px;
9
  left:100px;
10
}

von Weingut P. (weinbauer)


Lesenswert?

mit CSS schwierig, da man keine Eigenschaften von einem Objekt aufs 
Andere übertragen kann. Hab sowas mit JS und body onload gemacht ...

außer Du legst die DIVs nebeneinander als inline-block

: Bearbeitet durch User
von qsk (Gast)


Lesenswert?

mit dem CSS Pseudoelement ::before müsste es möglich sein.

von qsk (Gast)


Lesenswert?

bzw mit ::after
Ich würde die Links mit Listen machen. So hab ich's eben mal auf die 
Schnelle gemacht:
1
<!doctype html>
2
<html lang="de">
3
<head>
4
  <meta charset="utf-8">
5
6
  <title>Menu</title>
7
<style>
8
ul {
9
  list-style: none;
10
}
11
.menueintrag::after {
12
   content: "⮞";
13
}
14
</style>
15
</head>
16
  <li><å class="menueintrag" håref="dahin">link 1</å></li>
17
  <li><å class="menueintrag" håref="dahin">link 2</å></li>
18
  <li><å class="menueintrag" håref="dahin">link 3</å></li>
19
<body>
20
<ul class="menue">
21
22
23
</ul>
24
</body>
25
</html>

von Matthias S. (Gast)


Lesenswert?

qsk schrieb:
>mit dem CSS Pseudoelement ::before müsste es möglich sein.

::after Selector ist mit neu. Danke. Ich seh mir das gleich mal an.

von Matthias S. (Gast)


Lesenswert?

Ich habe gerade etwas gefunden, was eigentlich naheliegend war, an das 
ich aber nicht gedacht habe. Der Unicode-Zeichensatz beinhaltet 
Sonderzeichen, wie etwa &#9662; und fertig ist die Laube. Das was ich 
brauchte und mit der Positionierung gibt es keinerlei Probleme mehr.

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.