Twitter Bootstrap Navigáció

Archívum 2006-2018.11.09 sablonok-grafikak
#1

Sziasztok!



Nem rég kezdtem el responsive-webdesignnal foglalkozni és a következő problémára nem találok megoldást!



Ugyebár bootstrapben így épül fel a navigáció:



























Project name













S azt szeretném megoldani, hogy a menü csak akkor legyen leomló ha a böngésző ablakának szélessége (width: 768px) vagy az alá csökken! Ehelyett már 979px-nél összeomlik. Erre kellene valami megoldás. Köszi.
#2

Szia!



Ezt, hogy a “leomló” menü, 768px alatt kapcsoljon be, a legegyszerűbben jQuery -vel lehet megoldani. Azaz elég sok egyéb megoldás van, de szerintem talán ez az egyik legegyszerűbb módja.



Például így néz ki a twitter bootstrap menü:




<br />
<br />
<br />
<br />
<title>Bootstrap 101 Template</title><br />
<br />
<!-- Bootstrap --><br />
<br />
<br />
<br />
#container{<br />
background: white;<br />
<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="container" class="container"><br />
<br />
<div class="navbar navbar-inverse"><br />
<div class="navbar-inner"><br />
<div class="container"><br />
<br />
<a class="btn btn-navbar"><br />
<span class="icon-bar"></span><br />
<span class="icon-bar"></span><br />
<span class="icon-bar"></span><br />
</a><br />
<br />
<a class="brand" href="#">Menu</a><br />
<br />
<div id="my_collapse" class="nav-collapse collapse navbar-inverse-collapse"><br />
<ul class="nav"><br />
<li class="active"><a href="#">Home</a></li><br />
<li><a href="#">Link1</a></li><br />
<li><a href="#">Link2</a></li><br />
<li><a href="#">Link3</a></li><br />
<li><a href="#">Link4</a></li><br />
<br />
<li><a href="#">Link5</a></li><br />
<li class="dropdown"><br />
<a href="#" class="dropdown-toggle">Dropdown <b class="caret"></b></a><br />
<ul class="dropdown-menu"><br />
<li><a href="#">Action</a></li><br />
<li><a href="#">Another action</a></li><br />
<li><a href="#">Something else here</a></li><br />
<li class="divider"></li><br />
<li class="nav-header">Nav header</li><br />
<li><a href="#">Separated link</a></li><br />
<li><a href="#">One more separated link</a></li><br />
</ul><br />
</li><br />
</ul><br />
<br />
</div><!-- /.nav-collapse --><br />
</div><br />
</div><!-- /navbar-inner --><br />
</div><br />
<br />
<div class="row"><br />
<div class="span9"><br />
Bootstrap menu collapse módosítása. (768px szélesség alatt kapcsoljuk be a "legördülő" menüt)<br />
<hr /><br />
Aktuális szélesség:  <hr /><br /><br /><br /><br />
<br />
</div><br />
</div><br />
</div><br />
<br />
<br />
<br />
<br />
<br />

```<br />
 <br />
<br />
A <strong>div id="my_collapse" sorban ezt</strong> a my_collapse id-t én utólag tettembe, mert ezzel lehet vezérelni, így néz ki jquery ben:<br />
<br />
 <br />

jQuery(document).ready(function($){



function width_print(){

var width = $(window).width();

$(‘input[name=“szelesseg”]’).val(width+“px”);

return width;

}



width_print();



$(window).resize(function(){



width_print()



if(width_print() > 767){

$(‘div[id=“my_collapse”]’).removeClass(‘nav-collapse collapse navbar-inverse-collapse’);

$(‘a[class=“btn btn-navbar”]’).hide();

$(‘a[class=“brand”]’).hide();

}



else{

$(‘div[id=“my_collapse”]’).addClass(‘nav-collapse collapse navbar-inverse-collapse’);

$(‘a[class=“btn btn-navbar”]’).show();

$(‘a[class=“brand”]’).show();

}



});



})

Ezt az egészet<strong> script</strong> tagok közé lehet betenni a<strong> body</strong> lezáró része elé! Ha wp-ben dolgozol akkor értelem szerűen beszúrhatod a footer.php-ba, akkro gondolom már beszúrtad a twitter bootstrap css-t és jquery-t is.<br />
<br />
Élő oldalon így néz ki, működés közben:<br />
<br />
__http://weboldalkeszitese.org/peldaoldal/twitter_menu/<br />
<br />
Az a lényege neki, hogy jQuery-vel kivesszük a<strong> nav-collapse collapse navbar-inverse-collapse osztályt, abban az estben ha nagyonna  az ablak szélessége mint  767 pixel! Így a menü megmarad, nem lesz "leomló"</strong><br />
<br />
 <br />
<br />
Ezzel párhuzamosan az "a" <strong>btn btn-navbar</strong>  -class-t elrejtjük, ez ugye az ikon, amire kattintva előjön a menü, a menü jobb részén. Ezt is ugye le kell tüntetni., illetve a width értékétől függően meg kell jeleníteni.<br />
<br />
 <br />
<br />
Persze itt is lehetett volna egyedi ID- t adni neki, mert akkor biztosan nem kavarhat be, ha estleg máshol is használsz ilyen osztályt.<br />
<br />
Ezért jó az ID, hogy abból 1 van és akkor a szelektoroknak jól lehet használni.<br />
<br />
 <br />
<br />
Így nem kell a css-t felülírni, meg keresgélni, mi hol van, jQuery függvényi erre jól használhatóak!<br />
<br />
 <br />
<br />
Ü: András<br />
<br />
 <br />
<br />
 <br />
<br />
 <br />
<br />
#3

Szia!



Egyszerűen, úgy tudod megoldani, ha fogod a max-width 979px-es media query utasításban lévő kódot (bootstrap-responsive.css), majd kivágod és és beilleszted a max-width 767px-es media query utasításba. Az a kód felel az összeomlásért, csatoltam a fájlt, amiben benne a módosítás.

#4

Köszönöm a válaszokat, utólag én is rájöttem, hogy a responsive css-t kell piszkálni, de ez a jquery-s megoldás még jobb ki fogom próbálni! :smiley: Még egyszer köszönöm.