Let's make the WebPerfect.pl

Na pewno udało Ci się już takie zauważyć na innych stronach. Klikasz w rozwijaną listę typu select i wybierasz daną opcję – następnie przenosi Cię do wybranego działu. W bardzo prosty sposób możesz zamieścić coś takiego na własnej stronie.

Poniżej zobaczysz dwa rodzaje realizacji takiego menu. Pierwsze będzie przypominało standardowy formularz z przyciskiem, drugie natomiast będzie przenosić do wybranego miejsca przez sam wybór opcji…

Wersja z przyciskiem

<form action="sciezka_do_pliku.html" method="post">
    <select name="my_newsletter" id="my_newsletter">
        <option value="in">Zapisz</option>
        <option value="out">Wypisz</option>
    </select>

    <input type="submit" value="Przenieś" >
</form>

W ten oto sposób można przekierować gościa np. na stronę z dalszymi instrukcjami odnośnie wpisywania / wypisania z newslettera. Powyższa instrukcja wymaga od gościa naciśnięcia przycisku, aby akcja została wykonana. Za pomocą JavaScript możemy wykonać to samo bez przycisku…

Wersja bez przycisku

<form>
    <select onchange="self.location.href = this.value">
        <option> MENU </option>
        <option value="http://www.webperfect.pl"> Strona Główna </option>
        <option value="http://www.webperfect.pl/informacje"> Informacje </option>
    </select>
</form>

Jeśli używasz ramek zamień this.value na parent.nazwa_ramki

W ten sposób po naciśnięciu na daną opcję zostajemy przeniesieni na odpowiednią (pod)stronę. Takie dodatkowe menu z pewnością pomoże Ci urozmaicić witrynę, ale nie stosowałbym go jako zamiennika typowego menu zbudowanego z list wypunktowanych i odsyłaczy. Zachęcam do testowania.

Tagi: formularz, javascript, menu, odsyłacze.