• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Per Click Div-Ebene einblenden lassen. z.B. Responnsive Navigationsleiste

LikeStar

LikeStar

New member
Hey jswelt.de Community,

ich bin gerade am Programmieren meiner Seite und möchte die Seite responsive gestalten.

Funktioniert auch.

Jetzt ist möchte ich ein Button hinzufügen, welches beim Click eine Navigationsleiste (Vertikal) einblendet.

Habt ihr da evtl. ein paar Tipps auf Lager für mich?
Würde mich sehr freuen.
Vielen Dank.
 

Anhänge

  • 99.jpg
    99.jpg
    914 Bytes · Aufrufe: 14
Zuletzt bearbeitet:
Mach doch mal einen Testlink damit man sehen kann was du bereits wie einsetzt und darauf aufbauend kann dir hier evtl. jemand einen Tip geben.
 
Ich habe mir das so vorgestellt, dass ab einer bestimmten Auflösung rechts ein Symbol erscheint und die eigentliche
Navigation plötzlich verschwindet. Durch das Anklicken des Symbols erscheint die Navigation "navi_mobil" aufklappend vertikal nach unten.

HTML: 
<a href="#" class="navi_btn">
 <img src="bilder/navi_btn.jpg" alt="button">
</a>


<div id="navi_mobil">
 <a href="#" class="navi_btn"></a>
 <a href="#" class="navi_btn"></a>
 <a href="#" class="navi_btn"></a>
 <a href="#" class="navi_btn"></a>
 <a href="#" class="navi_btn"></a>
</div>

Hoffentlich konnte ich mich einigermaßen gut ausdrücken. :)

So was geht sicherlich mit jquery, richtig?
Schöne viele Grüße
 
kkapsner schrieb:
Das kannst du sehr schön mit media queries realisieren.


Ja, z.B. über .toggle() | jQuery API Documentation

PS: href="#" ist sinnfrei und macht nur Probleme. Für Formatierung sollte man CSS verwenden.
Zum Vergrößern anklicken....


Danke für deinen Link:

Damit müsste es funktionieren.
Probiere es heute auf jedenfall aus :)))))
HTML: 
$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {
   // Animation complete.
 });
});


Edit:
Für Formatierung sollte man CSS verwenden.
Zum Vergrößern anklicken....

Habe ich doch ;-)

HTML: 
class="navi_btn"
 
Zuletzt bearbeitet:
Funktioniert leider nicht =/


HTML: 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<style>
p {
background: #dad;
font-weight: bold;
font-size: 16px;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$( "button" ).click(function() {
$( "p" ).toggle( "slow" );
});
</script>
</body>
</html>

- - - Aktualisiert - - -

LikeStar schrieb:
Funktioniert leider nicht =/


HTML: 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<style>
p {
background: #dad;
font-weight: bold;
font-size: 16px;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$( "button" ).click(function() {
$( "p" ).toggle( "slow" );
});
</script>
</body>
</html>
Zum Vergrößern anklicken....


Edit:

Habe ein funktionierendes Script gefunden:

HTML: 
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.button').click(function() { 
jQuery('#navi').fadeIn('slow'); });
jQuery('.button2').click(function() {
jQuery('#navi').fadeOut('slow');
  }); });
</script>


Klicke ich auf einen Link .button, erscheint die Navigation. Wunderbar!
Mit .button2 verschwindet die Navigation.

Wie kann ich es machen, dass nur mit dem Link .button die Navigation
eingeblendet wird, sowie auch wieder verschwindet?

Würde mich über eine Antwort freuen.

:)
 
LikeStar schrieb:
Klicke ich auf einen Link .button, erscheint die Navigation. Wunderbar!
Mit .button2 verschwindet die Navigation.

Wie kann ich es machen, dass nur mit dem Link .button die Navigation
eingeblendet wird, sowie auch wieder verschwindet?
Zum Vergrößern anklicken....
Dafür gibt es die Funktion .fadeToggle() - Display or hide the matched elements by animating their opacity.:
Code: 
jQuery(document).ready(function(){
	jQuery(".button").click(function(){
		jQuery('#navi').fadeToggle( "slow", "linear");
	});
});
PS: eine vernünftige Codeeinrückung wie in meinem Beispiel ist zur Wahrung der Übersichtlichkeit unentbehrlich.
 
j-l-n schrieb:
Dafür gibt es die Funktion .fadeToggle() - Display or hide the matched elements by animating their opacity.:
Code: 
jQuery(document).ready(function(){
	jQuery(".button").click(function(){
		jQuery('#navi').fadeToggle( "slow", "linear");
	});
});
PS: eine vernünftige Codeeinrückung wie in meinem Beispiel ist zur Wahrung der Übersichtlichkeit unentbehrlich.
Zum Vergrößern anklicken....

Danke! :)

Funktioniert einwandfrei.

Wenn ich meine responsive Seite jetzt minimiere, erscheint das Symbol Navi Symbol. Durch das Klicken erscheint dann die
Mobile Navigation :)

Wenn allerdings die Navi verschwindet und ich den Browser wieder maximiere, verschwindet das Symbol mittels:

HTML: 
media screen and (max-width: 1033px) {

und ich kann die eigentlich Navigation nicht wieder einblenden lassen. Ich hoffe ich konnte mich verständlich ausdrücken.

Edit:

Gut ich habe improvisiert und es mit CSS lösen können

HTML: 
media screen and (max-width: 1033px) {

Da habe ich einfach opacity auf 1.0 gesetzt :)))))))

Am Liebsten würde ich das aber per Javascript lösen.

Egal es funktioniert.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben