Options inherit class of List on mobile devices via Javascript?

[theograd]

On my website, my navigation uses the below for navigation structure. There’s about 8 navigation points, I’ve only listed 2 for example’s sake. I have a class on all of the Brand LI’s. I would like to retain this class when the LI’s become Options on mobile devices.

I put the Javascript below on what I think is changing the navigation LI’s into Options.

What I’m looking to do is, on mobile devices, assign the CSS of display:none to the BrandsNavdropdown class, but leave the actual “Brands” link, thus removing clutter from the entire dropdown on mobile devices.

So that’s pretty much it. I just need for the options to inherit whatever classes are assigned to the LI’s. The reason I don’t want to apply the BrandsNavDropdown class across the board is that only the brands dropdown has it. The other navigation points, like New Products listed below, do not. Any ideas on how to do that? Thank you.

Brands drop-down:

<li><a href="/brands.aspx" title="Brands" alt="Brands">Brands</a>
<div>
<ul>

<li class="BrandsNavDropdown"><a href="/am-leonard/c/BR_1001_10/">
AM Leonard</a></li>

<li class="BrandsNavDropdown"><a href="/ars/c/BR_1001_20/">
ARS</a></li>

<li class="BrandsNavDropdown"><a href="/atlas/c/BR_1001_21/">
Atlas</a></li>

<li class="BrandsNavDropdown"><a href="/bahco/c/BR_1001_24/">
Bahco</a></li>

<li class="BrandsNavDropdown"><a href="/bio-plex/c/BR_1001_30/">
Bio-plex</a></li>

<li class="BrandsNavDropdown"><a href="/braun-horticulture/c/BR_1001_401/">
Braun Horticulture</a></li>

<li class="BrandsNavDropdown"><a href="/carhartt/c/BR_1001_44/">
Carhartt Specials</a></li>

<li class="BrandsNavDropdown"><a href="/dramm/c/BR_1001_73/">
Dramm</a></li>

<li class="BrandsNavDropdown"><a href="/earthway/c/BR_1001_78/">
Earthway</a></li>

<li class="BrandsNavDropdown"><a href="/elvex/c/BR_1001_83/">
Elvex</a></li>

<li class="BrandsNavDropdown"><a href="/field-king/c/BR_1001_94/">
Field King</a></li>

<li class="BrandsNavDropdown"><a href="/flexogen/c/BR_1001_98/">
Flexogen</a></li>

<li class="BrandsNavDropdown"><a href="/fox-valley/c/BR_1001_102/">
Fox Valley</a></li>

<li class="BrandsNavDropdown"><a href="/gilmore/c/BR_1001_110/">
Gilmore</a></li>

<li class="BrandsNavDropdown"><a href="/husqvarna/c/BR_1001_491/">
Husqvarna</a></li>

<li class="BrandsNavDropdown"><a href="/igloo/c/BR_1001_133/">
Igloo</a></li>

<li class="BrandsNavDropdown"><a href="/leatherman/c/BR_1001_157/">
Leatherman</a></li>

<li class="BrandsNavDropdown"><a href="/little-wonder/c/BR_1001_345/">
Little Wonder</a></li>

<li class="BrandsNavDropdown"><a href="/midwest-rake/c/BR_1001_166/">
Midwest Rake</a></li>

</ul>
</div>
</li>

New Products Navigation:

<li><a href=" /p13_new/c/P13_NEW/" title="New Products" alt="New Products">New</a>
</li>

Javascript that I think is replacing the LI’s with Options:

$("<select />").appendTo("nav.subnav");
    $("<option />", {
        "selected": "selected",
        "value": "",
        "text": "Go to..."
    }).appendTo("nav.subnav select");
    $("nav.subnav a[href]").each(function () {
        var el = $(this);
        $("<option />", {
            "value": el.attr("href"),
            "text": el.text()
        }).appendTo("nav.subnav select");
    });
    $("nav.subnav select").change(function () {
        window.location = $(this).find("option:selected").val();
    });

[Paulie_D]

I just need for the options to inherit whatever classes are assigned to the LI’s.

I’m not sure you can apply classes to <option tags.

I mean, obviously, you can but what would be the purpose? Can you style an <option> tag?…Pretty sure that’s very hard to do in most browsers.

[theograd]

The class will only have display:none; on it, and only be called for devices between 320px – 1199px.

I only want the class to be applied to the Brands, however. Which is what makes this so difficult.

Essentially, when going to mobile, the Brands makes the entire drop down huuuuge for customers because we have so many brands. So I want to hide all of the brands, but customers can click on the main navigation point called “Brands” which will take them to a listing of all the Brands they can choose from.

For instance: http://i.imgur.com/c19ajLz.png

After it says “Brands” – all of those are Brands under “Brands”. I want to display:none them and only them.
On the desktop, the LI dropdowns look like this: http://i.imgur.com/W5wrLj4.png
And function pretty well.

I’m just looking to hide all of the content of Brands on Mobile since the dropdown is hyoooge because of it.

Essentially, I want to get rid of everything under “Brands” and only Brands via display:none on the class when the device is 320px – 1199px.

Which is why I cannot use it on every single option because I want all of the other options to display. Only the options under “Brands” I need to be display:none because there’s just so many of them, and that makes the list way too large for a customer to scroll through.

[Paulie_D]

Sorry..whatever you said confused the heck out of me.

You have a list item / link called “Brands” which has a div inside which holds another ul which has li all with a class of “BrandsNavDropdown”.

You don’t want that submenu (or list items) to appear at mobile size but you do want the “Brands” link to still work which, presumably is another page?

Is that right?

I think, if I have the above right, it should be possible to target the div after the a with title-attribute of “Brands” and just display:none.

EDIT: Yep….http://codepen.io/Paulie-D/pen/iaueH

A reduced case Codepen would be really handy.

[theograd]

Correct. Essentially, I just want everything under “Brands” to not display on mobile is the goal.

The problem targeting it is that the LI’s become Options because we go from a LI navigation to a drop-down Option navigation on mobile devices via JS replaces.

So I’m trying to figure out how to target just the Brands if everything gets replaced by the JS.

[Paulie_D]

Essentially, I just want everything under “Brands” to not display on mobile is the goal.

Done…see the Codepen for the method, the only thing absent is the media query.

[theograd]

Just tried the Codepen, didn’t work.

This is what it still looks like:

http://i.imgur.com/aUxCbbA.jpg

Inspect Element on left, what it looks like on the right (Test URL is: http://rsatestamle.dminsite.com)

My problem is that everything becomes a big ol’ list of via the JS I posted, and a lot of those options I do not want to use when I get to mobile.

[Paulie_D]

Then it sounds like you need to refine the JS to only select the top level menu items and make those into options under the select.

Without seeing the top-level menu HTML it’s hard to go further but the fact that.subnav is mentioned in your script is probably significant.

[theograd]

Yes, the desktop HTML for navigation reads as:

MOD EDIT: massive HTML removed. Please use Codepen instead to display HTML/CSS/JS

tl;dr

[Alen]

Why don’t you create two separate select options and load them based on whatever condition… so

<div class="mobile">
  <select>
    ...
  </select> 
</div>

and…

<div class="desktop">
  <select>
    ...
  </select> 
</div>

[theograd]

I think the selects are being constructed through this JS:

$(“”).appendTo(“nav.subnav”);
$(“”, {
“selected”: “selected”,
“value”: “”,
“text”: “Go to…”
}).appendTo(“nav.subnav select”);
$(“nav.subnav a[href]”).each(function () {
var el = $(this);
$(“”, {
“value”: el.attr(“href”),
“text”: el.text()
}).appendTo(“nav.subnav select”);
});
$(“nav.subnav select”).change(function () {
window.location = $(this).find(“option:selected”).val();
});

Which I’m not sure at all how to edit to do what I want it to do.

[Author]

Posts