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:

<div id="header"><nav class="nav-main"><div class="moduletable "><ul class="nav menu "><li class="item-101 current active"><li class="item-113"><a a="" agb<="" href="/index.php/agb-blw"><span></span></a></li><li class="item-112"><li class="item-114"><li class="item-115"><li class="item-122"></ul><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>

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:

<?php/** * @package     Joomla.Site * @subpackage  mod_menu * * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved. * @license     GNU General Public License version 2 or later; see LICENSE.txt */defined('_JEXEC') or die;// Note. It is important to remove spaces between elements.$class = $item->anchor_css ? 'class="' . $item->anchor_css . '" ' : '';$title = $item->anchor_title ? 'title="' . $item->anchor_title . '" ' : '';if ($item->menu_image){        $item->params->get('menu_text', 1) ?        $linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" /><span class="image-title">' . $item->title . '</span> ' :        $linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" />';}else{        $linktype = $item->title;}switch ($item->browserNav){        default:        case 0:?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>"<?php echo $title; ?><?php echo $linktype; ?></a><span></span><?php                break;        case 1:                // _blank?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" target="_blank" <?php echo $title; ?><?php echo $linktype; ?></a><span></span><?php                break;        case 2:        // Use JavaScript "window.open"?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');return false;" <?php echo $title; ?><?php echo $linktype; ?></a><span></span><?php                break;}

Und default_url.php:

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */


defined('_JEXEC') or die;


// Note. It is important to remove spaces between elements.
$class = $item->anchor_css ? 'class="' . $item->anchor_css . '" ' : '';
$title = $item->anchor_title ? 'title="' . $item->anchor_title . '" ' : '';


if ($item->menu_image)
        {
                $item->params->get('menu_text', 1) ?
                $linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" /><span class="image-title">' . $item->title . '</span> ' :
                $linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" />';
}
else
{
        $linktype = $item->title;
}


$flink = $item->flink;
$flink = JFilterOutput::ampReplace(htmlspecialchars($flink));


switch ($item->browserNav) :
        default:
        case 0:
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>"<?php echo $title; ?><?php echo $linktype; ?></a><span></span><?php
                break;
        case 1:
                // _blank
?><a <?php echo $class; ?>href="<?php echo $flink; ?>" target="_blank"<?php echo $title; ?><?php echo $linktype; ?></a><span></span><?php
                break;
        case 2:
                // Use JavaScript "window.open"
                $options = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,' . $params->get('window_open');
                        ?><a <?php echo $class; ?>href="<?php echo $flink; ?>" onclick="window.open(this.href,'targetWindow','<?php echo $options;?>');return false;" <?php echo $title; ?><?php echo $linktype; ?></a><span></span><?php
                break;
endswitch;

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

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:

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

Ich weiß nicht weiter...

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

Hallo deGobbis,

nein, leider hilft mir das Tutorial nicht weiter.
Ich habe schon zahlreiche Tutorials im Netz gelesen, aber keines war hilfreich, in sofern,
das ich es nicht auf meine Problematik anwenden konnte.

Trotzdem vielen Dank.

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:

<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:

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:

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,

ul#nav-menu .nav-child.unstyled.small li:hover ul
ul#nav-menu li:hover ul
#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