Hallo,
habe da ein Problem beim Einbau eines CSS Listen Menüs (dieses hier http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/ )
Mein Problem ist folgendes,
ich habe mit Photoshop ein Layout gesliced und habe nun die HTML Datei vorliegen. Nun wollte ich dort ein CSS Menü einbauen.
Der Ausgangspunkt im Layout ist also zum Beispiel die Grafik "Startseite" bei der das Menü nach unten aufklappen soll sobald man darüber fährt.
Dummerweise taucht das Menü jetzt "irgendwo" auf der Seite auf wenn ich über die Grafik Startseite fahre und nicht direkt unter Startseite wo der Kasten eigentlich hin soll.
Meine HTML Datei nach dem Slicen in Photoshop und dem einfügen der nötigen Verweise auf css und js schaut so aus.
Vermutlich ist hier auch einiges falsch ...
Kann mir jemand sagen was ich wo einfügen muß damit dieser verdammte Kasten mit den Links dort auftaucht wo ich ihn haben möchte ? Hatte mich bisher immer mit Tabellen durchgeschlagen deshalb mit dem Div Containern noch nicht soviel Ahnung, hatte mir den Einstieg jetzt nicht so kompliziert vorgestellt .Nachdem ich nun seit 4 Stunden zu keinem Ergebnis komme und kurz vorm ausrasten bin dacht ich ich frag mal hier freundlich nach Hilfe :)
Gruß
habe da ein Problem beim Einbau eines CSS Listen Menüs (dieses hier http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/ )
Mein Problem ist folgendes,
ich habe mit Photoshop ein Layout gesliced und habe nun die HTML Datei vorliegen. Nun wollte ich dort ein CSS Menü einbauen.
Der Ausgangspunkt im Layout ist also zum Beispiel die Grafik "Startseite" bei der das Menü nach unten aufklappen soll sobald man darüber fährt.
Dummerweise taucht das Menü jetzt "irgendwo" auf der Seite auf wenn ich über die Grafik Startseite fahre und nicht direkt unter Startseite wo der Kasten eigentlich hin soll.
Meine HTML Datei nach dem Slicen in Photoshop und dem einfügen der nötigen Verweise auf css und js schaut so aus.
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testseite</title>
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/menue.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>
<script type="text/javascript">
$(document).ready(function($){
$('#mega-menu-7').dcMegaMenu({
rowItems: '3',
speed: 'fast',
effect: 'slide'
});
});
</script>
</head>
<body>
<div id="tableheader">
<div id="header-01_"><img id="header_01" src="header/header_01.png" width="999" height="144" alt="" /></div>
<div id="header-02_"><img id="header_02" src="header/header_02.png" width="266" height="26" alt="" /></div>
<div id="header-home_"><a href="#"><img id="header_home" src="header/header_home.png" width="34" height="15" border="0" alt="zur Startseite" /></a></div>
<div id="header-04_"><img id="header_04" src="header/header_04.png" width="13" height="74" alt="" /></div>
<div id="header-news_"><a href="#"><img id="header_news" src="header/header_news.png" width="65" height="15" border="0" alt="Aktuelles" /></a></div>
<div id="header-06_"><img id="header_06" src="header/header_06.png" width="13" height="74" alt="" /></div>
<div id="header-board_"><a href="#"><img id="header_board" src="header/header_board.png" width="42" height="15" border="0" alt="Forum" /></a></div>
<div id="header-08_"><img id="header_08" src="header/header_08.png" width="14" height="74" alt="" /></div>
<div class="green">
<ul id="mega-menu-7" class="mega-menu">
<li>
<div id="header-league_"><a href="#"><img id="header_league" src="header/header_league.png" width="33" height="15" alt="Ligen" /></a></div>
<ul>
<li><a href="#">Unterpunkt der Liste</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="header-10_"><img id="header_10" src="header/header_10.png" width="13" height="74" alt="" /></div>
<div id="header-cups_"><a href="#"><img id="header_cups" src="header/header_cups.png" width="45" height="15" border="0" alt="Pokale" /></a></div>
<div id="header-12_"><img id="header_12" src="header/header_12.png" width="14" height="74" alt="" /></div>
<div id="header-ladder_"><a href="#"><img id="header_ladder" src="header/header_ladder.png" width="46" height="15" border="0" alt="Ladder" /></a></div>
<div id="header-14_"><img id="header_14" src="header/header_14.png" width="13" height="74" alt="" /></div>
<div id="header-tournament_"><a href="#"><img id="header_tournament" src="header/header_tournament.png" width="56" height="15" border="0" alt="Turniere" /></a></div>
<div id="header-16_"><img id="header_16" src="header/header_16.png" width="14" height="74" alt="" /></div>
<div id="header-rules_"><a href="#"><img id="header_rules" src="header/header_rules.png" width="69" height="15" border="0" alt="Regelwerk" /></a></div>
<div id="header-18_"><img id="header_18" src="header/header_18.png" width="14" height="74" alt="" /></div>
<div id="header-team_"><a href="#"><img id="header_team" src="header/header_team.png" width="74" height="15" border="0" alt="Ligaleitung" /></a></div>
<div id="header-20_"><img id="header_20" src="header/header_20.png" width="14" height="74" alt="" /></div>
<div id="header-faq_"><a href="#"><img id="header_faq" src="header/header_faq.png" width="31" height="15" border="0" alt="Hilfe" /></a></div>
<div id="header-22_"><img id="header_22" src="header/header_22.png" width="13" height="28" alt="" /></div>
<div id="header-menu_"><a href="#"><img id="header_menu" src="header/header_menu.png" width="65" height="15" border="0" alt="Allgemein" /></a></div>
<div id="header-24_"><img id="header_24" src="header/header_24.png" width="38" height="28" alt="" /></div>
<div id="header-25_"><img id="header_25" src="header/header_25.png" width="34" height="59" alt="" /></div>
<div id="header-26_"><img id="header_26" src="header/header_26.png" width="65" height="59" alt="" /></div>
<div id="header-27_"><img id="header_27" src="header/header_27.png" width="42" height="59" alt="" /></div>
<div id="header-28_"><img id="header_28" src="header/header_28.png" width="33" height="59" alt="" /></div>
<div id="header-29_"><img id="header_29" src="header/header_29.png" width="45" height="59" alt="" /></div>
<div id="header-30_"><img id="header_30" src="header/header_30.png" width="46" height="59" alt="" /></div>
<div id="header-31_"><img id="header_31" src="header/header_31.png" width="56" height="59" alt="" /></div>
<div id="header-32_"><img id="header_32" src="header/header_32.png" width="69" height="59" alt="" /></div>
<div id="header-33_"><img id="header_33" src="header/header_33.png" width="74" height="59" alt="" /></div>
<div id="header-34_"><img id="header_34" src="header/header_34.png" width="31" height="13" alt="" /></div>
<div id="header-35_"><img id="header_35" src="header/header_35.png" width="65" height="13" alt="" /></div>
<div id="header-36_"><img id="header_36" src="header/header_36.png" width="15" height="48" alt="" /></div>
<div id="header-facebook_"><a href="https://www.facebook.com/..." target="_blank"><img id="header_facebook" src="header/header_facebook.png" width="17" height="17" border="0" alt="Folge uns auf Facebook" /></a></div>
<div id="header-38_"><img id="header_38" src="header/header_38.png" width="4" height="48" alt="" /></div>
<div id="header-googleplus_"><a href="https://plus.google.com/b/..." target="_blank"><img id="header_googleplus" src="header/header_googleplus.png" width="17" height="17" border="0" alt="Folge uns auf Google+" /></a></div>
<div id="header-40_"><img id="header_40" src="header/header_40.png" width="4" height="48" alt="" /></div>
<div id="header-twitter_"><a href="https://twitter.com/..." target="_blank"><img id="header_twitter" src="header/header_twitter.png" width="17" height="17" border="0" alt="Folge uns auf Twitter" /></a></div>
<div id="header-42_"><img id="header_42" src="header/header_42.png" width="4" height="48" alt="" /></div>
<div id="header-rss_"><a href="rssfeed.php?section=news"><img id="header_rss" src="header/header_rss.png" width="17" height="17" border="0" alt="RSS-Feed" /></a></div>
<div id="header-44_"><img id="header_44" src="header/header_44.png" width="171" height="48" alt="" /></div>
<div id="header-45_"><img id="header_45" src="header/header_45.png" width="4" height="46" alt="" /></div>
<div id="header-usercp_"><a href="#"><img id="header_usercp" src="header/header_usercp.png" width="130" height="11" border="0" alt="Kontrollzentrum" /></a></div>
<div id="header-47_"><img id="header_47" src="header/header_47.png" width="13" height="46" alt="" /></div>
<div id="header-48_"><img id="header_48" src="header/header_48.png" width="130" height="35" alt="" /></div>
<div id="header-49_"><img id="header_49" src="header/header_49.png" width="17" height="31" alt="" /></div>
<div id="header-50_"><img id="header_50" src="header/header_50.png" width="17" height="31" alt="" /></div>
<div id="header-51_"><img id="header_51" src="header/header_51.png" width="17" height="31" alt="" /></div>
<div id="header-52_"><img id="header_52" src="header/header_52.png" width="17" height="31" alt="" /></div>
</div>
</body>
</html>
Vermutlich ist hier auch einiges falsch ...
Kann mir jemand sagen was ich wo einfügen muß damit dieser verdammte Kasten mit den Links dort auftaucht wo ich ihn haben möchte ? Hatte mich bisher immer mit Tabellen durchgeschlagen deshalb mit dem Div Containern noch nicht soviel Ahnung, hatte mir den Einstieg jetzt nicht so kompliziert vorgestellt .Nachdem ich nun seit 4 Stunden zu keinem Ergebnis komme und kurz vorm ausrasten bin dacht ich ich frag mal hier freundlich nach Hilfe :)
Gruß