• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] Verzweifel an meinen gewünschten Erweiterungen für ein gefundenes Dropdown-Menu

Blaster

Neues Mitglied
Hallo Leute!

ich habe ein cooles Dropdown Menu gefunden, dass ich gerne für meine Webseite benutzen möchte, verzweifele aber an den von mir angestrebten Erweiterungen.

Der HTML Teil sieht so aus:
HTML:
<main>
<nav>
    <menu>
      <menuitem id="demo1">
        <a>drop</a>
        <menu>
          <menuitem><a>about</a></menuitem>
               <menuitem>
                  <a>settings</a>
                  <menu>
                     <menuitem><a>Test 1</a></menuitem>
                     <menuitem><a>Test 2</a></menuitem>
                     <menuitem><a>Test 3</a></menuitem>
                     <menuitem><a>Test 4</a></menuitem>
                  </menu>
               </menuitem>
          <menuitem><a>help</a></menuitem>
          <menuitem id="demo2">
            <a>more</a>
            <menu>
              <menuitem id="demo3">
                <a>deeper</a>
                <menu>
                  <menuitem>
                  <!--div class="anchor-regular"><a>Test</a></div-->
                  <a>deep 1</a></menuitem>
                  <menuitem><a>deep 2</a></menuitem>
                  <menuitem><a>deep 3</a></menuitem>
                </menu>
              </menuitem>
              <menuitem><a>test</a></menuitem>
            </menu>
          </menuitem>
        </menu>
      </menuitem>    
         <menuitem><a>no drop</a></menuitem>
    </menu>
  </nav>
  </main>

Das CSS sieht so aus:
CSS:
html, body{
   padding:0px;
   margin:0px;
   background:#ffffff
   font-style: Verdana;
   width:100vw;
}
body * {
   margin:0;
   padding:0;
}

/* HTML Nav Styles */
nav menuitem {
   position:relative;
   display:block;
   opacity:0;
   cursor:pointer;
}

nav menuitem > menu {
   position: absolute;
   pointer-events:none;
}
nav > menu { display:flex; }

nav > menu > menuitem { pointer-events: all; opacity:1; }
menu menuitem a { white-space:nowrap; display:block; }
 
menuitem:hover > menu {
   pointer-events:initial;
}
menuitem:hover > menu > menuitem,
menu:hover > menuitem{
   opacity:1;
}
nav > menu > menuitem menuitem menu {
   transform:translateX(100%);
   top:0; right:0;
}
/* User Styles Below Not Required */

/* place in browser win */
nav {
   margin-top: 20px;
   margin-left: 20px;
}

nav a {
  
   background:#f0f8ff;
   color:blue;
   min-width:190px;
   transition: background 0.5s, color 0.5s, transform 0.5s;
   margin:0px 6px 6px 0px;
   padding:20px 40px;
   box-sizing:border-box;
   border-radius:3px;
   box-shadow: 0px 2px 4px rgba(100, 100, 100, 0.5);
   position:relative;
 
}

nav a:hover:before {
   content: '';
   top:0;left:0;
   position:absolute;
   background:rgba(100, 100, 100, 0.2);
   width:100%;
   height:100%;
}

nav > menu > menuitem > a + menu:after{
   content: '';
   position:absolute;
   border:10px solid transparent;
   border-top: 10px solid blue;
   left:12px;
   top: -40px;
}
nav menuitem > menu > menuitem > a + menu:after{
   content: '';
   position:absolute;
   border:10px solid transparent;
   border-left: 10px solid blue;
   top: 20px;
   left:-180px;
   transition: opacity 0.6, transform 0s;
}

nav > menu > menuitem > menu > menuitem{
   transition: transform 0.6s, opacity 0.6s;
   transform:translateY(150%);
   opacity:0;
}
nav > menu > menuitem:hover > menu > menuitem,
nav > menu > menuitem.hover > menu > menuitem{
   transform:translateY(0%);
   opacity: 1;
}

menuitem > menu > menuitem > menu > menuitem{
   transition: transform 0.6s, opacity 0.6s;
   transform:translateX(195px) translateY(0%);
   opacity: 0;
}
menuitem > menu > menuitem:hover > menu > menuitem,
menuitem > menu > menuitem.hover > menu > menuitem{
   transform:translateX(0) translateY(0%);
   opacity: 1;
}

Und das Javascript sieht so aus:

Javascript:
var count = 1
setTimeout(demo, 500)
setTimeout(demo, 700)
setTimeout(demo, 900)
setTimeout(reset, 2000)

setTimeout(demo, 2500)
setTimeout(demo, 2750)
setTimeout(demo, 3050)


var mousein = false
function demo() {
   if(mousein) return
   document.getElementById('demo' + count++)
      .classList.toggle('hover')
 
}

function demo2() {
   if(mousein) return
   document.getElementById('demo2')
      .classList.toggle('hover')
}

function reset() {
   count = 1
   var hovers = document.querySelectorAll('.hover')
   for(var i = 0; i < hovers.length; i++ ) {
      hovers[i].classList.remove('hover')
   }
}

document.addEventListener('mouseover', function() {
   mousein = true
   reset()
})

Ich will jetzt, dass im jedem Blockdisplay des Links durch Hover sollen nun drei Zeilen auftauchen:
In der ersten Zeile, mit der Ausrichtung top-rechts, in einem anderen Style (Font, Size, Color) "letztes Update: 2023.02.23
In der Nitte wie immer der Link mit den Linktext
Und an der unteren Zeile nun, mit der Ausrichtung buttom recht,s n einem anderen Style (Font, Size, Color) "derzeitige Seiten: 23"

Ich versuch schon seit Tagen das irgendwie mit CSS und HTML statisch hinzubekommen, brech mir aber hierbei die Finger.
Habt Ihr ein paar Ideen für mich was man da machen kann? Mir gehen die ideen aus.

Weiterhin versuche ich eine "deaktviert" Klasse zu entwickeln, die das Dropdown im Menu verhindert und das Blockdisplay in einer anderen Hintergrund und Schriftfarbe dastellt. Da habe ich auch noch keine Idee, wie ich das machen soll.

Habe ihr ein paar Ansätze für mich?
Danke[/i]

Ich habe das mal uploaded zum betrachten

[edit by Mod] [ code ][ /code ]-Tags eingepflegt
 
Zuletzt bearbeitet von einem Moderator:
Ich hoffe das die anderen dir helfen können , ich verstehe nicht was vorhat .
Ohne das JS ist es ja schon ein laufendes Menü.
Das JS macht ja jetzt noch nichts wie ich das sehe, zumindest sieht es ohne JS gleich aus.I
Ich will jetzt, dass im jedem Blockdisplay des Links durch Hover sollen nun drei Zeilen auftauchen:

In der Nitte wie immer der Link mit den Linktext
Und an der unteren Zeile nun, mit der Ausrichtung buttom recht,s n einem anderen Style (Font, Size, Color) "derzeitige Seiten: 23"

Weiterhin versuche ich eine "deaktviert" Klasse zu entwickeln, die das Dropdown im Menu verhindert und das Blockdisplay in einer anderen Hintergrund und Schriftfarbe dastellt.

Ich kann leider mit allen 3 Zusagen nicht viel anfangen.
Falls dir heute keiner hilft, dann versuche mir das morgen mal so zu erklären, dass ich es verstehe.
Ab und an bin ich doof( heute wohl besonders) und brauche mehr Zuneigung bei den Erklärungen.


Ist das das ganze Menü , oder sind da noch mehr Links drinne ?
 
Allaf!

danke basti für die Tags,
Ab und an bin ich doof( heute wohl besonders) und brauche mehr Zuneigung bei den Erklärungen.
Ich auch. Deshalb bin ich ja hier :p

Das Hauptproblem liegt an diesen CSS Code
CSS:
nav > menu > menuitem > a + menu:after{
   content: '';
   position:absolute;
   border:10px solid transparent;
   border-top: 10px solid blue;
   left:12px;
   top: -40px;
}
nav menuitem > menu > menuitem > a + menu:after{
   content: '';
   position:absolute;
   border:10px solid transparent;
   border-left: 10px solid blue;
   top: 20px;
   left:-180px;
   transition: opacity 0.6, transform 0s;
}
Damit wird der gesamte anchor formatiert. Der Linktext und die url im HTML bekommt und das Format der Box (display: block; ) festlegt. Wenn ich in der Box noch zwei Zeilen top-right und buttom-right einfügen will, muss ich das a + menu:after entweder irgendwie erweitern im CSS, oder auflösen, oder versuchen vom HtML aus mit div oder style irgendwie den Kram einfügen. Aber ich weiß nicht wie.

Das JS steuert die Andockfunktionsbewegung und Transparenzveränderung durch den MouseIn bzw. MouseOver Trigger, sowie die reset func für den stack handle durch remove, wenn Du die Mouse rausziehst. Das kommt nicht vom CSS
Das sieht ohne JS deshalb gleich aus, weil Du den Browser Cache wohl nicht gelöscht hast. Aber auf meinen localhost sieht es auch anders aus, werde das nochmal checken.

Ist das das ganze Menü , oder sind da noch mehr Links drinne ?
Das ist nur der kopierte Beispielcode. Wenn die Sache die ich vorhabe funzt , wird der Menubaum bis 3.500 Seiten aufnehmen müssen.
 
@Sempervivum:

Hi, super! :)
Das mit dem menuitem wusste ich nicht, aber mein altes Menu ist ein Listenmenu.
Aber Du bist sicher das alle Attribute von menuitem auch unter <li> verwendet werden können? oder <ul> Insbesondere display:block;?
 
Ja, dann werde ich mal fummeln.

Dein CSS Tag div.class { ... ] war im Prinzip genau die Idee die ich gesucht habe.

Danke.:smile:
 
@SpiceLab
Danke für den Tipp!
51% cover ist wohl etwas wenig.
Alle meine Design Wünsche funktionieren mit menuitem.
Ich versuche jetzt auf ListenItem zu migrieren und hoffe das mit display: block klappt.
 
Zurück
Oben