• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Link auf Unterseite vom Hauptmenü

tsting

tsting

Neues Mitglied
Liebe Community,
ich hab eine Frage bzgl. zur Verlinkung auf Unterseiten. Und zwar habe ich eine Horizontale Leiste mit den Hauptmenüpunkten, die per Drop-Down Menü auf die zweite Ebene der Unterseiten verlinken soll. Ich weiß zwar wie man das verlinken müsste, ich hab die Seite aber so aufgebaut, dass ich an meine (Anfänger)Grenzen stoße. Und zwar habe ich wenn man auf die Hauptmenüpunkte klickt auf der Linken Seite dann auch das Seitenmenü. Und in der Mitte dann einen DIV Container den ich per Javascript dynamisch gemacht habe, damit sich nur dieser ändert, wenn man auf die jeweiligen Unterpunkte klickt. Wenn man auf einen Hauptmenüpunkt klickt dann öffnet sich eine neue html Seite. Das Seitenmenü funktioniert einwandfrei, aber ich komme über das Dropdownmenü nicht auf die Unterseite einer anderen Seite. Damit es ein bisschen besser verständlich ist, hab ich das grafisch dargestellt. Also angenommen ich bin im UM3/2 und will per Dropdown Menü gleich zum UM 2/2 springen.. geht das überhaupt wenn das per DIV geregelt ist?
Ich hoffe ihr versteht was ich meine! Danke schon mal!
 

Anhänge

  • aufbauhp.png
    aufbauhp.png
    22 KB · Aufrufe: 9
<!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 content="de-at" http-equiv="Content-Language" /> -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Wir</title>

<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #000000;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #ffffff;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #dddddd; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #eeeeee; }
li:hover li a:hover { background: #dddddd; }


.auto-style1 {
border-width: 0px;
}


.auto-style3 {
font-family: Gautami;
}


.auto-style4 {
font-weight: normal;
}


</style>
</head>

<body>

<div id="aussen" style=" width:1100px; margin-left:auto; margin-right:auto">
<div id="header" style="position: relative; left: 6px; top: 12px; width: 1100px; height: 210px; z-index: 8">
<img alt="hgbild1" height="210" src="images/hgbild10.jpg" width="1100" /></div>
<div id="logolink" style="position: relative; left: 7px; top: -43px; width: 120px; height: 151px; z-index: 9">
<a href="index.html">
<img alt="logo" height="151" src="images/logo2.png" width="120" class="auto-style1" /></a></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<!-- HAUPTMENÜ -->

<ul id="menu">
<li id="aktuell" style="left: 154px; top: -358px; z-index: 7; " class="auto-style4"><a href="aktuell.html">Aktuell</a></li>
<li id="wir" style="left: 185px; top: -358px; z-index: 6;"><a href="wir.html">
<strong>Wir</strong></a>
<ul class="fn-nav">
<li><a href="#" data-site="dervorstand">Der Vorstand</a></li>
<li><a href="#" data-site="mitwirkende">Mitwirkende</a></li>
<li><a href="#" data-site="regisseure">Die Regisseure</a></li>
</ul>
</li>
<li id="produktionen" style="left: 225px; top: -358px; z-index: 5;"><a href="produktionen.html">Produktionen</a>
<ul>
<li><a href="#">Burg Reichenstein</a></li>
<li><a href="#">Kulturtreffbad</a></li>
</ul>
</li>
<li id="multimedia" style="left: 253px; top: -358px; z-index: 4;"><a href="multimedia.html">Multimedia</a></li>
<li id="jugend" style="left: 291px; top: -358px; height: 27px; z-index: 3;"><a href="jugend.html">Jugend</a>
<ul>
<li><a href="#">Die kleine Hexe</a></li>
<li><a href="#">Der Zauberer von OZ</a></li>
</ul>
</li>

</ul>

<div id="linie" style="position: relative; left: 152px; top: -356px; width: 950px; height: 11px; z-index: 2">
<img alt="linie" height="8" src="images/linie.png" style="float: left" width="956" /></div>


<!-- SIDEBAR LINKS -->
<div id="main">
<nav id="sidebar" style="position: relative; left: 10px; top: -300px; width: 154px; height: 303px; z-index: 10" class="auto-style3">
<ul class="fn-nav">
<li id="dervorstand" style="left: 0px; top: 0px; z-index: 6; width:154px"><a name="ankervorstand" data-site="dervorstand" href="#">Der Vorstand</a></li>
<li id="mitwirkende" style="left: 0px; top: 5px; z-index: 5; width:154px"><a data-site="mitwirkende" href="#">Mitwirkende</a></li>
<li id="dieregisseure" style="left: 0px; top: 10px; z-index: 5; width:154px"><a data-site="regisseure" href="#">Die Regisseure</a></li>
</ul>
</nav>

<div id="content" style="left:174px; top:-603px; width: 927px; z-index: 1; height: 252px; position: relative;">
<!-- Hier wird später der Inhalt stehen -->
</div>
</div>
<!-- Hier kommt JavaScript hin. -->
<script src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
// Erst starten wenn das Dokument fertig geladen ist.
$(document).ready(function(){
// Beim ersten Laden muss eine Seite geladen werden.
$("#content").load("wirstart.html");


// WENN auf einen Link innerhalb von .fn-nav geklickt wurde, DANN führe diese Funktion aus.
$('.fn-nav a').click(function(e){
// Verhindert, dass der Browser die Seite beim Klick auf einen Link neulädt.
e.preventDefault();

// Speichert den Inhalt des Attributes in der Variablen site.
var site = $(this).data('site');

// .html an den Namen anhängen.
site = site + '.html';

// Seite laden und in .content einsetzen.
$("#content").load(site);
});
});
</script>

<p>&nbsp;</p>
</div>
</body>

</html>
 
Hab es gesehen, kann dir leider nicht helfen, weil nix Ahnung. Da muss ei JQuery Profi ran.
 
tsting schrieb:
Die Links sind über Javascript geregelt...


Ich würde auch gerne diese Links über Javascript verlinken.
Zum Vergrößern anklicken....

Die anderen Menüpunkte brauchen halt auch ein data-site Attribut bzw. parent-Klasse fn-nav?

Übrigens: Wenn du Code im Forum postest dann bitte in CODE-/HTML-Tags.
Oder noch besser verwendest du einen Service wie jsfiddle.net.
Dann sparst du uns lästige Vorarbeiten.
 
Mal ne Frage zum Script. Ist es denn so gut Inhalte einzubinden die nicht wirklich im Quelltext stehen?
 
War an alle gerichtet die JS können, aber du kannst sie mir auch beantworten. Ich habe mir JQuery eingebunden um das Beispiel vom TE nachvollziehen zu können. Dabei ist mir aufgefallen, dass die geladenen Seiten nicht wirklich im HTML-Quelltext stehen. Was soll denn Googel so finden, wenn nichts weiter im HTML steht(außer die Index.html). Vielleicht ist ja PHP besser geeignet.
 
djheke schrieb:
War an alle die JS können, aber du kannst mir das auch beantworten. Ich habe mir JQuery eingebunden um das Beispiel vom TE nachvollziehen zu können. Dabei ist mir aufgefallen, dass die geladenen Seiten nicht wirklich im HTML-Quelltext stehen. Was soll denn Googel so finden, wenn nichts weiter im HTML steht(außer die Index.html). Vielleicht ist ja PHP besser geeignet.
Zum Vergrößern anklicken....

Google ist mittlerweile im Stande Javascript auszuführen. Theoretisch sollte es also indiziert werden. Darauf angelegt habe ich es jedoch noch nicht.
Da ich aber sowieso deaktiviertes JS möglichst unterstützen will und mir das die letzten Jahre angewöhnt habe, mache ich das vereinfacht meist folgendermaßen (ungetestet):

HTML: 
<ul>
  <li><a href="seite-1.html">Seite 1</a></li>
  <li><a href="seite-2.html">Seite 2</a></li>
</ul>

Code: 
function load(url) {
  $.ajax({
    url: url,
    success: function (data) {
      var $data = $(data);
      var $content = $data.filter('#content');
      $('#content').html($content.html());
      history.pushState(null, null, url);
    },
    error: function () {
      window.location.href = url;
    }
  });
}

$('ul li a').click(function (event) {
  load($(this).attr('href'));

  return false;
});

Sollte also kein JS aktiv sein, funktioniert die Seite ganz normal.
So kommen auch andere Suchmaschinen garantiert mit der Indizierung klar und Deeplinking ist auch ohne Probleme und ohne JS möglich.

Wenn JS aber verfügbar ist, wird der Inhalt dynamisch nachgeladen.
Natürlich geht durch diese Methode der Vorteil von Ajax bezüglich kleineren Datenmengen verloren, da immer ein komplettes HTML-Dokument geladen wird. No-JS-Abwärtskompatibilität ist mir allerdings wichtiger als ein paar Millisekunden.

Serverseitig werden diese HTML Dokumente natürlich von PHP generiert.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben