Hover Menü effekt (Laserschwert fährt aus)

  • Hallo alle zusammen,


    ich habe eine Seite gefunden, deren Hover effekt ich gerne mal ausprobieren würde.


    Ich habe mir das mal mit Firebug angeschaut, es scheint ein Javascript zu sein.


    Meine Frage: würde es nicht auch mit css (Transitions) gehen?


    Und, ich wollte mir das Script in Firebug anschauen, Firebug schreibt: bitte Seite aktualisiern um Code anzuzeigen...


    gesagt, getan... aber kein Code wird angezeigt...


    Kennt Ihr den Effekt? Wo könnte ich die Basics herbekommen, um es sauber einzubauen?


    Hier der Link zu der Seite: http://www.b-signs.de/


    Vielen Dank für hilfreiche Tipps von euch.


    Gruß,


    tru

  • Hallo allerseits...


    ich bin jetzt etwas weitergekommen...


    Habe aber noch ein "kleines" Problem.
    Diesen Laser Effekt habe ich jetzt einigermaßen... nur, die Menüpunkte werden nicht angezeigt.



    Firebug sagt mir:


    Ach ja... hab ich vergessen...
    ich habe ein mod override gemacht, damit hinter dem a tag ein span eingebaut ist, so soll das mit dem Laser funktionieren...
    default_component.php:


    Und default_url.php:


    Was habe ich falsch gemacht?

  • Hallo Re:Later,


    vielen Dank für deine Aufmerksamkeit.


    Was ich meine ist, das rot markierte... das wird einfach hinzugefügt... soll aber weg:
    <li class="item-113">
    <a a="" agb<="" href="/index.php/agb-blw">
    <span></span>
    </a>
    </li>


    Und, diese Link gehören auch nicht darein:
    <a a="" video<="" href="/index.php/video00">
    </a>
    </div>
    <a a="" video<="" href="/index.php/video00">
    </a>
    </nav>
    <a a="" video<="" href="/index.php/video00"> </a>
    </div>


    Kannst Du mir sagen, bzw. erklären, wie ich das Grundgerüst aufbauen muss?
    Ich habe zwei Dateien modifiziert, einmal die default_component.php,
    und einmal die default_url.php.


    So das immer ein span tag zu den Link angehängt wird.
    So soll das im original Code funktionieren (das dieser laser Effekt passiert)


    Meine Frage ist eigentlich die, welche Basis Angaben muss ich eigentlich machen?
    1. Das Menü ansprechen: z.B. .nav-menu etc.
    2. a
    3. ul und li
    4.a:hover ( a:hover span etc)
    Habe aber auch gesehen, das es li:hover gibt.
    wo kommt das denn zum Einsatz?


    Ich bräuchte wirklich eine kurze, prignante Erklärung... im Netz finde ich das so nicht, bzw. verstehe ich nicht.


    Wäre sehr erleichtert, wenn Du mir das erklären könntest, denke das man das Grundprinzip einfach nur verstehen muss, oder?


    LG
    tru

  • Code
    1. $class = $item->anchor_css ? 'class="' . $item->anchor_css . '" ' : '';
    2. $title = $item->anchor_title ? 'title="' . $item->anchor_title . '" ' : '';


    : ''; muss gegen : '" '; ersetzt werden, da sonst das Anführungszeichen nicht geschlossen wird und dann der Unsinn angezeigt wird.

  • Hallo zusammen,


    ich habe es nun mit dem "Laser" Effekt hinbekommen. Vielen Dank nochmal.


    Habe aber ein Problem mit dem Submenü.
    Wenn ich im Modul die Angabe Untermenüeinträge anzeigen auf Nein setze, dann werden mir die anderen Menüpunkte´, in der ersten Ebene, angezeigt.


    Wenn ich auf einen Menüpunkt klick, der ein Untermenü hat, dann verschwinden die anderen nachfolgenden Menüpunkte, in der ersten Ebene.
    Und die Untermenüpunkte werden auch nicht dargestellt.


    Wenn ich im Modul die Angabe Untermenüeinträge anzeigen auf Ja setze, dann sien die nachfolgenden Menüpunkte, erste Ebene, weg.


    Mein Ansatz war erst, die Untermenüpunkte mit CSS zu formatieren.
    Aber, der Fehler ist erstmal bei dem Listeneintrag li, welches das Untermenü hat.


    Das li nimmt die Größe des untergeordneten ul s an...?
    Desshalb wollte ich das li (mit Submenü), seperat formatieren.


    Z.B. so:

    Code
    1. ul#nav-menu li.item-113.deeper.parent {
    2. width:100px;
    3. margin:0;
    4. }


    Ich weiß nicht weiter...


    Habt Ihr eine Idee?
    Hier der Link zur Seite:http://www.blw-24.dehttp://www.blw-24.de
    Gruß,
    tru

  • Ok, ich greif mal weiter aus.


    Da Du kein Framewor wie Bootstrap verwendest, sollte Dir die Seite eigentlich recht gur weiterhelfen. Nehmen wir uns mal dieses einfache Dropdown-Menü als Vorlage(http://webdesignerhut.com/css-dropdown-menu/). Wenn Du die CSS auf Deine Struktur überträgst, natürlich musst Du die Klassen anpassen, bekommst Du eine saubere Umsetzung eines Dropdown-Menüs als Grundlage. Nachfolgend ergänzt Du Deine Laser-Funktion und Tada, die Darstellung passt.

  • Hallo deGobbis,


    vielen Dank für deinen Link.


    Ich möchte gern ei dem Code leien, den ich jetzt habe, da alles soweit funktioniert, bis auf das einlenden des Untermenüs.


    Und ich denke, es ist einfach nur ein Syntaxfehler, das ich das untergeordnete ul nicht richtig anspreche.
    Das auslenden klappt ja, nur das einlenden eim hover will noch nicht...


    Hier sonst noch mal ein Ausschnitt aus der HTML:

    Code
    1. <div id="header"><div class="main"><div class="moduletable"><ul id="nav-menu" class="nav menu"><li class="item-101 current active"><a href="/"></li><li class="item-113 deeper parent"><a href="/index.php/agb-blw">Test<span></span></a><ul class="nav-child unstyled small"><li class="item-124"></ul></li><li class="item-114"><li class="item-122"></ul></div></div>


    Im CSS Teil habe ich das Untermenü so ausblenden können:

    Code
    1. ul#nav-menu .nav-child.unstyled.small { background-image: url(../images/sidebar-bgd.png); position:absolute; display:none; float:left; clear:both; width:100px; height:30px; margin:35px 0px 0px 60px; z-index:1;}


    Und den hover einblend Effekt versuche ich so:

    Code
    1. ul#nav-menu .nav-child.unstyled.small li:hover { background-image: url(../images/sidebar-bgd.png); position:absolute; display:block; float:left; clear:both; width:100px; height:30px; margin:35px 0px 0px 60px; z-index:1;}


    Habe alles mögliche probiert,

    Code
    1. ul#nav-menu .nav-child.unstyled.small li:hover ul
    2. ul#nav-menu li:hover ul
    3. #nav-menu ul ul li:hover


    Und so weiter... ist eher ein raten...


    Desshalb hilft mir ein Tutorial nicht viel, da ich die Regel der hierarchie nicht verstehe, hab ein Nachschlagebuch, geht da auch nicht draus hervor...


    Für weitere Hilfe wäre ich sehr Dankbar


    Gruß,
    tru

  • ul#nav-menu .nav-child.unstyled.small bezieht sich auf das Untermenü, deshalb kann ul#nav-menu .nav-child.unstyled.small li:hover nicht funktionieren, denn damit würdest du sagen, dass eine Aktion immer dann ausgeführt werden soll, wenn du mit der Maus über einen <li> innerhalb deines Untermenüs gehst. Versuche mal statt
    ul#nav-menu .nav-child.unstyled.small li:hover
    das hier ul#nav-menu > li:hover .nav-child.unstyled.small

  • Achso, wenn du deine CSS noch so anpasst, bleibt das Untermenü auch offen, wenn du mit der Maus darüber willst. ;-)