Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


So ein Menü wird gewünscht
#1
Hm, da muss man ja wieder denken!
https://my-urmo.com/de/

Oder hat jemand hier das schon gebaut?

Frank (Faulheit am Abend)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Frank,
ich verstehe deine Frage nicht, wenn ich ehrlich bin Smiling.

Was ist da groß zu denken? Das ist doch die einfachste aller Navis, die man überhaupt nutzen kann. Da ist doch nix besonderes dran... absoluter Mindeststandard
lg Doris
_____________________________________________

Ich wünsche mir 3 Dinge:

1. die Kraft, Dinge zu ändern, die ich ändern kann,
2. die Gelassenheit, Dinge hinzunehmen, die ich nicht ändern kann
3. die Weisheit, beides voneinander zu unterscheiden...


.
NOf 2015 ( HTML 5 Dynamic)
Win 10
Grafik und Bildbearbeitung: Corel Suite X8


www.fotoatelier-essen.de
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Es ist der Maus-Over-Effekt.
Ja ja, ist nicht so kompliziert, wenn man das ganz selbst baut.
Wenn man das aber mit dem Mobi-eigenen Menü machen will....
Nur so ein Gedanke halt.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Hallo Frank
das ist doch ne standart Bootstrap Navi. letztes und vorletztes item ist ein dropdown.
Welches mouseOver? :confused:

Du meinst aber nicht den simplen :hover effekt?
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Frank,

Du könntest z.B. der vorhandenen CSS-Class "nav-link" noch zusätzliche Attribute geben:

Code:
.nav-link:hover {
  transition: background-color 1.5s ease;
  background-color: red;
}

Zitat:<a class="nav-link link text-black" href="#" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Link der Menüleiste</a>

Nun würde sich bei Mausüber der Hintergrund rot einfärben - durch das "transition" in einer Zeit von 1.5 Sekunden.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Hi Tommy,
das geht nicht so ganz, denn nur der Text ist dann rot hinterlegt.
In der Beispielseite haben wir aber einen farbigen Kasten in kompletter Navi-Höhe drin.
Also müsste dann jedes Navi-Item in ein eigenes DIV mit 100% Höhe.
Und das dann auch nur in der PC-Ansicht

Also hier ist meine Baustelle gerade
https://www.afripix.de/parasitus/
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
... ja - da müsste man jetzt das richtige DIV treffen (mit der gesamten Navi-Höhe). Da hatte ich jetzt noch nicht nach gesucht. In der mobilen Ansicht müsste man das dann wieder über die Display-Pixel-Abfrage regeln.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Das einzige DIV, was da drum sitzt, wäre die ganze Navi-Zeile.
Und auch die entspricht nicht der Höhe vom gesamten Kopf.

Sooo trivial ist die Sache dann doch wieder nicht...

Und wie konnte man nochmal den Inhalt eines DIVs vertikal zentrieren....Gedächniss....da sollte es drin sein!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Musst Du ein wenig suchen und probieren (ich komme da heute nicht mehr zu).

Du kannst z.B. das "padding" in & a der class="nav-item" ändern (hier beispielhaft auf 2.0rem)

Code:
.nav-item {
 & span {
   padding-right: 0.4em;
   line-height: 0.5em;
   vertical-align: text-bottom;
   position: relative;
   text-decoration: none;
 }
 & a {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2.0rem 0 !important;
   margin: 0rem .65rem !important;
 }
}

Code:
.nav-item:hover {
 transition: background-color 1.5s ease;
 background-color: red;
}

das sieht dann schon mal so aus:


.jpg  Navi-Hover.jpg (Größe: 236,8 KB / Downloads: 5)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Ok, ans padding hatte ich nicht gedacht.
Vielen Dank dafür!
Wenn man von der Navbar selbst das padding auf 0 setzt, haben wir den gewünschten effekt
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
thumbs up

... ich habe das hier, nur auf der Startseite dieser meiner Testseite, mal eingebaut:

http://www.mobirise-tutorials.com/Testseiten/
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Aktuelle Version wird nicht geladen Kiki1972 13 167 10.12.2018, 20:20
Letzter Beitrag: Rancher
  Block wird unvollständig angezeigt cichlid 6 159 20.11.2018, 15:08
Letzter Beitrag: Tommy Herrmann
  Menü-Scheiß teil 2 stobi_de 3 132 06.11.2018, 08:48
Letzter Beitrag: stobi_de
  4.8.6 - Menü-Scheiß stobi_de 40 827 02.11.2018, 06:14
Letzter Beitrag: Tommy Herrmann
  "Hamburger Menü" RB_BCC 29 636 01.11.2018, 14:54
Letzter Beitrag: RB_BCC
  Dieses Menü kann ich das auch bei Mobirise einfügen funsport 15 443 14.09.2018, 14:23
Letzter Beitrag: Tommy Herrmann
  menü store m4 am iphone nicht sichtbar iggy pop 26 663 05.09.2018, 17:08
Letzter Beitrag: AndyNeu
  Separator im Menü ? stobi_de 2 232 25.07.2018, 18:19
Letzter Beitrag: stobi_de
  Positionierung Icons im Menü? stobi_de 6 349 21.07.2018, 12:48
Letzter Beitrag: stobi_de
  Menü nicht ganz oben? stobi_de 17 1.085 05.07.2018, 10:39
Letzter Beitrag: stobi_de



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!