[Homepage] DropBar Menu

R

-=Renegade=-

Neuling
Thread Starter
Mitglied seit
06.12.2005
Beiträge
613
Hi!

Also ich hab wieder ein neues Problem:
Bei meiner Homepage würd ich gern ein Logo einbauen, welches 992 Pixel breit ist. Um Horizontales Scrolling zu verhindern, würd ich gern die Größe des Bildes dynamisch ändern. Da 100% aber nicht möglich ist, da Browserfenster mit Breiten von 1200 Pixel keine Seltenheit mehr sind und das Bild sonst gedehnt werden würde, hab ich mir folgende Lösung überlegt:
Code: 
<script language='javascript'>
if (window.innerWidth >= 992) {
document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="82%" name="Logo" border="0"></a>')
} else {
document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="100%" name="Logo" border="0"></a>')
}
</script>
Das Problem hierbei allerdings ist, dass sich die Größe beim verändern des Browserfensters nicht mitverändert, man müsste die Seite dazu aktualisieren. Deshalb meine Frage: Gibt es einen EventHandler, mit dem man auf das Verändern der Browserfenstergröße Einfluss nehmen kann?

Oder gibt es gar die Möglichkeit, die Größe eines Fenster per Variable (mit Formel) zu regeln. Denn bis jetzt hab ich das nich geschafft :(


so far
thx & mfg

Alte Frage schrieb:
Hi!

Ich würde in meine Homepage gerne so eine Drop Bar (heißt das so?) integrieren, wie es hier links oben bei News / Artikel,... ist, also das bei Klick drauf neue Menüs kommen.

Bisher hab ich nur Flashlösungen gefunden, gibts da auch was für HTML / JS / ... und hätte wer nen Code für mich?


so far
thx & mfg
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Wenn Du diese Anzeige nicht sehen willst, registriere Dich und/oder logge Dich ein.
also ich kenne auch nur flash Lösungen.Sicher kann man es auch mit Fireworks machen(wäre dann png oder so?).Man kann sich auch Free Drop Bars runterladen,jedoch mit label dan drin...
 
ich gehe davon aus dass du die ausklapp-menüs meinst oder ?

sowas geht mit javascript
 
Hi!

Also ich hab wieder ein neues Problem:
Bei meiner Homepage würd ich gern ein Logo einbauen, welches 992 Pixel breit ist. Um Horizontales Scrolling zu verhindern, würd ich gern die Größe des Bildes dynamisch ändern. Da 100% aber nicht möglich ist, da Browserfenster mit Breiten von 1200 Pixel keine Seltenheit mehr sind und das Bild sonst gedehnt werden würde, hab ich mir folgende Lösung überlegt:
Code: 
<script language='javascript'>
if (window.innerWidth >= 992) {
document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="82%" name="Logo" border="0"></a>')
} else {
document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="100%" name="Logo" border="0"></a>')
}
</script>
Das Problem hierbei allerdings ist, dass sich die Größe beim verändern des Browserfensters nicht mitverändert, man müsste die Seite dazu aktualisieren. Deshalb meine Frage: Gibt es einen EventHandler, mit dem man auf das Verändern der Browserfenstergröße Einfluss nehmen kann?

Oder gibt es gar die Möglichkeit, die Größe eines Fenster per Variable (mit Formel) zu regeln. Denn bis jetzt hab ich das nich geschafft :(


so far
thx & mfg
 
Code: 
<html><head>
<title>Größenänderung überwachen</title>
<script type="text/javascript">
function Fensterweite () {
  if (window.innerWidth) {
    return window.innerWidth;
  } else if (document.body && document.body.offsetWidth) {
    return document.body.offsetWidth;
  } else {
    return 0;
  }
}

function Fensterhoehe () {
  if (window.innerHeight) {
    return window.innerHeight;
  } else if (document.body && document.body.offsetHeight) {
    return document.body.offsetHeight;
  } else {
    return 0;
  }
}

function neuAufbau () {
  if (Weite != Fensterweite() || Hoehe != Fensterhoehe())
    location.href = location.href;
}

/* Überwachung von Netscape initialisieren */
if (!window.Weite && window.innerWidth) {
  window.onresize = neuAufbau;
  Weite = Fensterweite();
  Hoehe = Fensterhoehe();
}
</script>
</head>
<body>
<script type="text/javascript">
/* Überwachung von Internet Explorer initialisieren */
if (!window.Weite && document.body && document.body.offsetWidth) {
  window.onresize = neuAufbau;
  Weite = Fensterweite();
  Hoehe = Fensterhoehe();
}
</script>
<div id="Beispiel" style="position:absolute; top:100px; left:100px; border:solid 1px #000000;">
Text
</div>
<script type="text/javascript">
document.write("Weite: " + Weite + " Höhe: " + Hoehe);
document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="' + Weite + '" name="Logo" border="0"></a>');
</script>

</body></html>
Es würde so in etwa funktionieren... Quelle: http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm
Du musst nur noch diverse Abfragen und eine Formel für die Größenberechnung dazu erfinden^^
Allerdings würde ich das Logo wahrscheinlich als Background IMAGE mit no-repeat in ein div tag mit %-breite einbauen, welches sich an der Fenstergröße ausrichtet...
 
wario schrieb:
Code: 
<html><head>
<title>Größenänderung überwachen</title>
<script type="text/javascript">
function Fensterweite () {
  if (window.innerWidth) {
    return window.innerWidth;
  } else if (document.body && document.body.offsetWidth) {
    return document.body.offsetWidth;
  } else {
    return 0;
  }
}

function Fensterhoehe () {
  if (window.innerHeight) {
    return window.innerHeight;
  } else if (document.body && document.body.offsetHeight) {
    return document.body.offsetHeight;
  } else {
    return 0;
  }
}

function neuAufbau () {
  if (Weite != Fensterweite() || Hoehe != Fensterhoehe())
    location.href = location.href;
}

/* Überwachung von Netscape initialisieren */
if (!window.Weite && window.innerWidth) {
  window.onresize = neuAufbau;
  Weite = Fensterweite();
  Hoehe = Fensterhoehe();
}
</script>
</head>
<body>
<script type="text/javascript">
/* Überwachung von Internet Explorer initialisieren */
if (!window.Weite && document.body && document.body.offsetWidth) {
  window.onresize = neuAufbau;
  Weite = Fensterweite();
  Hoehe = Fensterhoehe();
}
</script>
<div id="Beispiel" style="position:absolute; top:100px; left:100px; border:solid 1px #000000;">
Text
</div>
<script type="text/javascript">
document.write("Weite: " + Weite + " Höhe: " + Hoehe);
document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="' + Weite + '" name="Logo" border="0"></a>');
</script>

</body></html>
Es würde so in etwa funktionieren... Quelle: http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm
Du musst nur noch diverse Abfragen und eine Formel für die Größenberechnung dazu erfinden^^
Allerdings würde ich das Logo wahrscheinlich als Background IMAGE mit no-repeat in ein div tag mit %-breite einbauen, welches sich an der Fenstergröße ausrichtet...
Zum Vergrößern anklicken....

Also erstmal danke, das ist genau das, was ich gesucht habe ;)

Allerdings hab ich jetzt noch ein kleines Problem dabei: Die Seite aktualisiert sich unter Firefox 2 ständig. Das ist vor allem dann nervig, wenn die Lesezeichen Liste aktiviert ist und man die Seite kleiner als die Lesezeichen macht, denn dann taucht der Resize Pfeil kaum bis gar nicht mehr auf (es geht auch ohne, aber es könne Leute abschrecken)
Zudem lädt eben die Seite wie gesagt nie fertig, d.h. in der Statusleiste arbeitet immer eine blaue Leiste, auch das sieht eher unschön aus.

Mein Ansatz wäre folgender gewesen:
Code: 
<script type="text/javascript">
if (Fensterweite != window.innerwidth) {
  if (window.innerWidth >= 992) {
    document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="992" name="Logo" border="0"></a>');
  } else if (window.innerWidth <= 50) {
    document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="50" name="Logo" border="0"></a>');
    history.go(0)
  } else {
    document.write('<a href="index.html"><img src="img/rss_logo_l.png" width="' + weite + '" name="Logo" border="0"></a>');
  }
}
</script>

Allerdings bringt das keine Veränderung. Gibt es hier vllt. eine Möglichkeit?

Und noch eine Frage hätte ich gleich:
Wie kann man bei den Lesezeichen ein anderes Symbol wie das weiße Blatt Papier unter Firefox oder eben das IE Symbol unter IE bringen?
Vom Quelltext anderer Seiten hätte ich im Header:
Code: 
<link rel="shortcut icon" href="/favicon.ico">
Allderings funktioniert das bei mir nicht und ich bin mir auch nicht 100% sicher, ob es so funktionieren sollte. Zudem teste ich die Seite offline, keine Ahnung ob das eine Auswirkung hat.

Das wars erstmal,
so far
thx & mfg
 
So, um nochmal auf das ursprüngliche Problem der Drop Bar zurückzukommen.

Ich hab das ganze jetzt für meine Bedürfnisse abgestimmt, herausgekommen ist dabei folgendes:

(Anmerkung: Ich hab das ganze in eine externe Funktion gepackt, damit ich bei Änderungen nicht wieder alle Seiten umändern muss)

dropbar.css
Code: 
.dropbarbox {
    background-image:url(../img/table_back.png);
    padding:12px; 
    margin:0px;    
    width:50px;
  }

.dropbar {
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    display: none;
  }

  ul#Navigation li:hover ul {
    display: block;
  }

  ul#Navigation li ul li {
    float: none;
    display: block;
  }

  ul#Navigation a, ul#Navigation span {
    font:  normal tahoma, sans-serif;
    display: block;
    width: 6.4em;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    color: #ff0000; background-image:url(../img/table_back.png);
  }

  ul#Navigation a:hover, ul#Navigation span {
    color: #0099FF; background-color: gray;
  }
}

dropbar.js
Code: 
function dropbar() {
  document.write('<p class="dropbarbox"></p>')
  document.write('<p class="dropbar">')
  document.write('<ul id="Navigation">')
  document.write('<li><a href="index.html">Home</a></li>')
  document.write('<li><a href="#News">News</a>')
  document.write('<ul>')
  document.write('<li><a href="news/findnews.php">Find</a></li>')
  document.write('<li><a href="news/newscategory.php">Category</a></li>')
  document.write('<li><a href="news/archiv.php">Archiv</a></li>')
  document.write('</ul></li>')
  document.write('<li><a href="#docs">Documents</a>')
  document.write('<ul>')
  document.write('<li><a href="docs/informations.html">Information Sheets</a></li>')
  document.write('<li><a href="docs/scripts.html">Scripts</a></li>')
  document.write('</ul></li>')
  document.write('<li><a href="#downloads">Downloads</a>')
  document.write('<ul>')
  document.write('<li><a href="downloads/software.html">Software</a></li>')
  document.write('</ul></li>')
  document.write('<li><a href="#com">Community</a>')
  document.write('<ul>')
  document.write('<li><a href="community/forum.php">Forum</a></li>')
  document.write('<li><a href="community/chat.php">IRC-Chat</a></li>')
  document.write('</ul></li>')
  document.write('<li><a href="#about">About</a>')
  document.write('<ul>')
  document.write('<li><a href="about/features.html">Features</a></li>')
  document.write('<li><a href="about/team.html">Team</a></li>')
  document.write('<li><a href="about/links.html">Links</a></li>')
  document.write('</ul></li>')
  document.write('</ul></p>')
  document.write('<p class="dropbarbox"></p>')
}

Das ganze sieht auch sehr schön aus, allerdings hab ich 2 Probleme dabei:
Vor und nach der Menüleiste sollte noch etwas Freiraum bleiben, und zwar in Form der .dropbarbox. Obwohl ich jetzt auch den Hauptteil in ein <p class> gepackt habe, schaffe ich es nicht, vorne und hinten etwas anzustückeln. Zudem wäre es schon mal hilfreich, das ganze Menü zu zentrieren, auch das hab ich leider nicht geschafft :(

Das zweite Problem besteht darin, dass ich gerne nach der Hauptmenüleiste einen kleinen Abstand hätte, allerdings dann nicht zwischen den einzelnen Unterpunkten. Bisher ist mir das nur gelugen, in dem dann für alle ein Abstand da war (margin-top:0.5em hat auch bei den Unterpunkten einen Abstand gemacht)


so, hoffe es kann mir wer helfen, bin mit meinem Latein leider am Ende :(

so far
thx & mfg
 
Anmelden, um zu antworten.
Hardwareluxx setzt keine externen Werbe- und Tracking-Cookies ein. Auf unserer Webseite finden Sie nur noch Cookies nach berechtigtem Interesse (Art. 6 Abs. 1 Satz 1 lit. f DSGVO) oder eigene funktionelle Cookies. Durch die Nutzung unserer Webseite erklären Sie sich damit einverstanden, dass wir diese Cookies setzen. Mehr Informationen und Möglichkeiten zur Einstellung unserer Cookies finden Sie in unserer Datenschutzerklärung.


Zurück
Oben Unten refresh