mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 16:47 Benutzername: Passwort: Auto-Login

Thema: hoverdrop menü erstellen via css oder javascript vom 28.07.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> hoverdrop menü erstellen via css oder javascript
Autor Nachricht
desertshadow
Threadersteller

Dabei seit: 28.07.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 28.07.2008 17:28
Titel

hoverdrop menü erstellen via css oder javascript

Antworten mit Zitat Zum Seitenanfang

hey leute,
ich ein hobbys designer, hauptsächlich nur das design mit photoshop.ich wollte für mich eine kleine privat page einrichten und habe ein design was ein hoverdrop menü nur leider sind meine html css kenntnisse nicht so gut dadrin.
mit hover drop meint ich sowas hier zb.

>klicken<

ich hatte nur mal in der schule kruze einführen in html css etc. ud den rest must ich mir selbst beibringen.
wenn jemand eine ahnung hat bzw mir das schreiben könnte , oder ein tut dazu geben könnte wär ich echt dankbar sonst kann ich meine page leider nicht weiter machen.
wenn es geht den code posten dazu, tutus mit dreamwaever etc nützen mir nichts da ich nur mit dem editor schreiben


hoffe ihr könnt helfen =)

mfg
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mo 28.07.2008 18:57
Titel

Antworten mit Zitat Zum Seitenanfang

mal google genutzt?boardsuche?

http://www.cssplay.co.uk/menus/
  View user's profile Private Nachricht senden
Anzeige
Anzeige
desertshadow
Threadersteller

Dabei seit: 28.07.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 29.07.2008 16:05
Titel

Antworten mit Zitat Zum Seitenanfang

ja auf der seite war ich selbst schon ,aber ich will eins ohne grafiken haben etc wenns geht von mir aus auch in javascript
  View user's profile Private Nachricht senden
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Di 29.07.2008 16:13
Titel

Antworten mit Zitat Zum Seitenanfang

auf der seite sind ca 300000000000000000000000000000000 menüs ohne
grafiken.......
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
desertshadow
Threadersteller

Dabei seit: 28.07.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 29.07.2008 17:34
Titel

Antworten mit Zitat Zum Seitenanfang

so ich habe nun eine navi gefunden die ich verändern werde.
aber da is listen sind sind ja die punke dahinter wie kann ich die ausblenden? decration irgendwas.
hier der code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="skeleton/skeleton.css" />
</head>

<body>
<ul id="nav">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us »<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
      <li><a href="#nogo">Who we are</a></li>
      <li><a href="#nogo">What we do</a></li>
      <li><a href="#nogo">Where to find us</a></li>
   </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">Products »<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
   <li><a href="#nogo">Tripods »<!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
         <li><a href="#nogo">Monopods</a></li>
         <li><a href="#nogo">Tripods</a></li>
         <li><a href="#nogo">Adjutable head</a></li>
         <li><a href="#nogo">Fixed</a></li>
         <li><a href="#nogo">Flash mount</a></li>
         <li><a href="#nogo">Floating head</a></li>
      </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="#nogo">Films »<!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
         <li><a href="#nogo">35mm</a></li>
         <li><a href="#nogo">Color Print</a></li>
         <li><a href="#nogo">Black and White</a></li>
         <li><a href="#nogo">Roll</a></li>
         <li><a href="#nogo">Color Slide</a></li>
      </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="#nogo">Cameras »<!--[if gte IE 7]><!--></a><!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
         <li><a href="#nogo">Compact »<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
            <li><a href="#nogo">Canon</a></li>
            <li><a href="#nogo">Nikon</a></li>
            <li><a href="#nogo">Minolta</a></li>
            <li><a href="#nogo">Pentax</a></li>
            </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li><a href="#nogo">Digital »<!--[if gte IE 7]><!--></a><!--<![endif]-->
               <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
               <li><a href="#nogo">Canon</a></li>
               <li><a href="#nogo">Nikon »<!--[if gte IE 7]><!--></a><!--<![endif]-->
                     <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                     <li><a href="#nogo">Lenses »<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                           <li><a href="#nogo">Standard</a></li>
                           <li><a href="#nogo">Telephoto</a></li>
                           <li><a href="#nogo">Wide Angle</a></li>
                           <li><a href="#nogo">Fish Eye</a></li>
                           <li><a href="#nogo">Mirror</a></li>
                           <li><a href="#nogo">Macro</a></li>
                        </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                     </li>
                     <li><a href="#nogo">Speedlight</a></li>
                     <li><a href="#nogo">Coolpix »<!--[if gte IE 7]><!--></a><!--<![endif]-->
                           <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                           <li><a href="#nogo">Coolpix S10</a></li>
                           <li><a href="#nogo">Coolpix L2</a></li>
                           <li><a href="#nogo">Coolpix S500</a></li>
                           <li><a href="#nogo">Coolpix P5000</a></li>
                           <li><a href="#nogo">Coolpix 4600</a></li>
                           <li><a href="#nogo">Coolpix S6 Silver</a></li>
                           </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                     </li>
                     <li><a href="#nogo">D200</a></li>
                     <li><a href="#nogo">D80</a></li>
                     </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
               </li>
               <li><a href="#nogo">Minolta</a></li>
               <li><a href="#nogo">Pentax</a></li>
               </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li><a href="#nogo">SLR »<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
            <li><a href="#nogo">Canon</a></li>
            <li><a href="#nogo">Nikon</a></li>
            <li><a href="#nogo">Minolta</a></li>
            <li><a href="#nogo">Pentax</a></li>
            <li><a href="#nogo">Panasonic</a></li>
            </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
      </li>
   <li><a href="#nogo">Flash</a></li>
   <li><a href="#nogo">Video</a></li>
   </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
<li><a href="#nogo">FAQs »<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
      <li><a href="#nogo">Cameras</a></li>
      <li><a href="#nogo">Film types</a></li>
      <li><a href="#nogo">Digital Photography</a></li>
   </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">Privacy »<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
      <li><a href="#nogo">Privacy Policy</a></li>
      <li><a href="#nogo">Privacy Statement</a></li>
   </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">Contact us</a></li>
</ul>

</body>
</html>


und hier die css datei:
Code:
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/skeleton.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#nav table {border-collapse:collapse;}
#nav li {float:left; padding:0 20px 0 10px;}
#nav li li {float:none;}
/* a hack for IE5.x and IE6 */
#nav li a li {float:left;}

#nav li a {display:block; float:left; color:#888; height:25px; padding-right:5px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}

#nav li:hover {position:relative; z-index:300; background:#fff;}
#nav a:hover {position:relative; z-index:300; text-decoration:underline; color:#b75;}

#nav :hover ul {left:0; top:22px;}
/* another hack for IE5.5 and IE6 */
#nav a:hover ul {left:-10px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#b75;}
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 29.07.2008 17:57
Titel

Antworten mit Zitat Zum Seitenanfang

decration irgendwas?

*ha ha* *ha ha* *ha ha*

Code:

list-style-type:none;
  View user's profile Private Nachricht senden
 
Ähnliche Themen Javascript menü
javascript menü
JavaScript-Menü fixen
Suche Javascript Menü
CSS Drop-Down Menü mit Javascript
Javascript-Menü, wie dieses?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.