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


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Matthias S. (Gast)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht lesenswert
mit dem CSS Pseudoelement ::before müsste es möglich sein.

von qsk (Gast)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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.

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.
Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt.
Bitte hier nur auf die ursprüngliche Frage antworten,
für neue Fragen einen neuen Beitrag erstellen.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.