Author Topic: Menu im Headbereich mit Mousover  (Read 511 times)

Offline Siggit

  • Posts: 115
Menu im Headbereich mit Mousover
« on: April 28, 2017, 10:24:19 AM »
Hallo!

ich möchte die Navigation im Head Bereich einbinden und ein Hintergrundbild anzeigen über dem die Navigation liegt. Es soll lediglich der Begriff Menu zu sehen sein und wenn ich mit der Maus über den Begriff Menu gehe dann soll die Navigation angezeigt werden.

Bsp. http://www.dario-gebel.com/
so ähnlich.


mein Code noch ungetestet

Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
...
</head>
<body>
<div id="site">
<div id="head">
<div id="headtitle"><?php page_header(); ?></<?php page_header(); ?>
<!-- Left Column -->
<div id="side">
<div id="navi">
<!-- Navigation-->
    <?php
show_menu2(1SM2_ROOTSM2_ROOT+2SM2_TRIM|SM2_PRETTY|SM2_XHTML_STRICT); 
    
?>

</div>
<!-- OPTIONAL: Suche -->
<div id="search">
<?php 
if (
SHOW_SEARCH) { ?>

<form action="<?php echo WB_URL?>/search/index.php" method="get">
<p><input type="hidden" name="referrer" value="<?php
echo defined('REFERRER_ID') ? REFERRER_ID PAGE_ID?>
" /></p>
<fieldset>
<legend><?php echo $TEXT['SEARCH']; ?>:</legend>
<input type="text" name="string" class="search_string" />
<input type="submit" name="wb_search" id="wb_search" value="<?php
echo $TEXT['SEARCH']; ?>
" />
</fieldset>
</form>
<?php 
?>

</div>
<!-- END frontend search -->
</div>
</div>
....
</body>
</html>

Ist es möglich solche Effekte mit Show Menu zu realisieren?

Danke

Online jacobi22

  • Posts: 5614
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: Menu im Headbereich mit Mousover
« Reply #1 on: April 28, 2017, 01:30:42 PM »
Quote
Ist es möglich solche Effekte mit Show Menu zu realisieren?

Sollte kein Problem sein, da es m.E. ein Effekt ist, der auf reinem CSS und :hover funktioniert, d.h. verschiedene Klassen wie navwrapper oder nav bekommen beim Überfahren (:hover) eine neue Definition. nav ist z.b. anfangs komplett durchsichtig (opacity:0;) und bekommt bei :hover dann opacity:1;
der gesamte Block bekommt eine Hintergrundfarbe mit Transparenz 0.35
Durch Verschiebungen und Ausblendungen sowie dem text-shadow entstehen dann diese Effekte.
Wenn du dir die style.css näher anschaust und das Grundprinzip dort verstehst, sollte es relativ leicht sein, Entsprechendes nachzubauen.
Bitte sieh mir nach, das ich dir keine fertige Lösung liefere, damit verdien ich normalerweise mein Geld.  :wink:
« Last Edit: April 28, 2017, 02:26:07 PM by jacobi22 »
Probleme sind da, um sie zu lösen, nicht, um nach Ausreden zu suchen.

Offline Siggit

  • Posts: 115
Re: Menu im Headbereich mit Mousover
« Reply #2 on: May 01, 2017, 11:10:28 PM »

Danke für deine Antwort werde es mir genauer anschauen wenn ich am Template weiter arbeite. :-)


 

postern-length