Dropdown dla niewidocznych elementów menu

Demo:
Demo dostępne na stronie: Menu dropdown hidden

Nie zawsze Bootstrap jest rozwiązaniem dla strony internetowej i jej elementów. Czasami jest tak, że potrzeba stworzenia czegoś własnego, bo żaden framework dla RWD nie jest w stanie rozwiązać problemu. Dla listy np. Menu, której elementy nie mieszczą się w jednej linii potrzeba stworzenia pozycji z całą zawartością tych elementów, które są poza obszarem okna. Trzeba to samemu napisać, nie ma frameworka, który nam w tym pomoże.

Może wydawać się to dziwne, ale nawet dzisiaj jedną z najpopularniejszych rozdzielczości monitora jest 1024x768px! I to w czasach, gdzie mamy monitory 4K na wyciągnięcie ręki. Miałem ostatnio taki przypadek, że menu główne musiał być w jednej linii z 8 elementami (napis + ikonka). Przy rozdzielczości fullHD nie było żadnego problemu, natomiast jak w firebagu podejrzałem jak wygląda w rozdzielczości 1024 to była lekka katastrofa.
Co w takim przypadku ?
Można by zastosować menu responsywne, takie jak na tabletach i telefonach, ale jednak wiele osbób (zdecydowana większość) nie chce mieć takeigo rozizania na PC-tach i mieć standardowe menu. Co w takim przypadku zrobić?

Maksymalna wyświetlana ilość elementów

W moim założeniu przy rozdzielczości 1024px szerokości okna mieszczą się maksymalnie 5 elementów w linii. (Header składa się z 3 kolumn):

<div class="col-md-2">
Logo
</div>
<div class="col-md-8">
<ul id="myList">
		<li>
			<a href="#">
				Home
			</a>
		</li>
		<li>
			<a href="#">
				Blog
			</a>
		</li>
		<li>
			<a href="#">
				About me
			</a>
		</li>
		<li>
			<a href="#">
				Contact
			</a>
		</li>
		<li>
			<a href="#">
				Special
			</a>
		</li>
		<li>
			<a href="#">
				Photos
			</a>
		</li>
		<li>
			<a href="#">
				Live
			</a>
		</li>
		<li>
			<a href="#">
				Goal
			</a>
		</li>
	</ul>
</div>
<div class="col-md-2">
User details
</div>

A więc przy założeniu, że maksymalnie mogę wyświetlić 5 elementów, to muszę pokazać pierwsze 4 i na końcu dodać kolejny z listą rozwijalną z całą resztą!
Zatem, zaczynamy skrypt. elementy przygotowawcze pod konkretne funkcje:

var bsContainerWidth = $(window).width(); //szerokość okna
size_li = $("#myList li").size(); // ilość elementów w menu

Następnie zakładam, że rozdzielczość jest równa 1024px. Wszystko co mniej, to już wskakuje menu responsywne. Co powyżej to w dalszej części.

 if(bsContainerWidth == 1024)
{
$('#myList li').hide();
x=4;
var rest = size_li - x;
$('#myList li:lt('+x+')').show();
}

Co tutaj mamy? Na początek ukrywam wszystkie elementy, i zakładam, że mogę pokazać 4 (x=4).
Liczę ile elementów jest jeszcze do pokazania, które nie zmieściły się w contencie, i na koniec pokazuję pierwsze 4.

Dodanie nowego elementy do listy z listą rozwijalną z pozostałymi

Poprzez funkcję append dodaję jako ostatnią pozycję nowy element z listą rozwijalną dropdown (funkcja z Boostrapa)

$("#myList").append('<li class="main-rest"><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><span class="icon-other"></span>Więcej</a></li>');

A więc mamy już nasz piąty element(pusty), który teraz musimy jakoś zapełnić. No to zamierzamy w nim stworzyć nową listę z elementami, które na razie są ukryte.

$(".main-rest").append('<div class="dropdown-menu"><ul id="main-rest-list"></ul></div>');
var hidden_items = $("#myList li").slice(x, size_li);
        $('#main-rest-list').append(hidden_items);

A więc mamy już nową listę main-rest-list, w której są wszsytkie elementy niemieszczące się w głównym menu w linii. elementy te są oczywiście niewodoczne, dopiero po kliknięciu w pozycję więcej rozwinie się nasza nowa lista.
Wykorzystałem tutaj funkcę slice, w której wskazałem od którego elementu do którego ma utworzyć naszą nową listę.

$('.main-rest').hover(function(){
            //$('#main-rest-list').show();
            $('#main-rest-list li').show();
        });

Mając już taki skrypt Możemy go dowolnie ostylować, według naszego upodobania dodając tylko jedną obowiązkową pozycje przy .main-rest

.main-rest {position:relative;}

Możemy ten skrypt powielić i dostosować dla innych rozdzielczości. Może to być przedział od-do oraz założenie, że ilośc elementów w menu jest większa niż 6. W innym przypadku dodałby element pusty.

(bsContainerWidth > 1024 && bsContainerWidth < 1367 && size_li > 6)
{
x=6;
}

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code