CODEWITHSUNDEEP
javascriptjqueryhtmlcssnavigation
Gleb Vorontsov
Gleb Vorontsov

Reputation: 13

Converting unordered list(ul tag) navigation to dropdown navigation(select tag)

Can you help me with converting unordered list navigation to dropdown navigation?

Currently I use this script

  $(function() {

    if (document.getElementById("level-2")) {
        initElement("#level-2");
    }
    if (document.getElementById("level-3")) {
        initElement("#level-3");
    }
    if (document.getElementById("embedded-level-3")) {
        initElement("#embedded-level-3");
    }


    function initElement(element) {
        $("<select />").appendTo(element);

        // Create default option "Go to..."
        $("<option />", {
            "selected": "selected",
            "value"   : "",
            "text"    : "Go to..."
        }).appendTo("nav"+element+" select");

        $(element + " a").each(function() {
            var el = $(this);
            $("<option />", {
            "value" : el.attr("href"),

            "text"  : el.text()
        }).appendTo(element + " select");
    });

        $(element + " select").change(function() {
            window.location = $(this).find("option:selected").val();
        });}
});

This scripts converts this list of "li" tags to select>option tags dropdowns

Active page is defined by a.active(a class="active").

Is it possible to change script to put link from class "active" and text from link on first position on dropdown menu select>option instead of "Go to..."?

Update To be clear, what I'm searching for.

Need to find element with class 'active' from the list, put it on first position of select dropdown amd then put all other elements of list in select dropdwon

From this

<nav>
    <ul>
    <li><a href="link1">Link 1</a></li>
    <li class="active"><a href="link2" class="active">Link 2</a></li>
    <li><a href="link3">Link 3</a></li>
    </ul>
</nav>

To this

<select>
<option class="active" value="link2>Link 2</option>
<option value="link1>Link 1</option>
<option value="link3>Link 3</option>
</select>

Upvotes: 1

Views: 686

Answers (1)

taxicala
taxicala

Reputation: 21759

Yes, it is possible, try this:

    $("<option />", {
        "selected": "selected",
        "value"   : "",
        "text"    : "Go to...", //Remove if you dont need it.
        "class"   : "active"
    }).appendTo("nav"+element+" select");

Upvotes: 1

Related Questions