2
\$\begingroup\$

This is my code

<ul id="filter">
    <li><a href="#" class="dropdown">Any status &#9662;</a>
        <form>
            <ul class="opt">
                <li>
                    <input class="option" type="submit" name="status" value="Active" />
                </li>
                <li>
                    <input class="option" type="submit" name="status" value="Inactive" />
                </li>
            </ul>
        </form>
    </li>
    <li><a href="#" class="dropdown">Any date &#9662;</a>
        <form>
            <ul class="opt">
                <li>
                    <input class="option" type="submit" name="date" value="Today" />
                </li>
                <li>
                    <input class="option" type="submit" name="date" value="This Week" />
                </li>
            </ul>
        </form>
    </li>
</ul>

In this example I have a dropdown with a list that I then make an effort to style not like a list (i.e removing bullet points, etc).

Is it possible to produce cleaner code to achieve the same result, without using a list structure, or is a list actually the right approach to this problem?

\$\endgroup\$
3
  • 3
    \$\begingroup\$ I don't see any problems. Most menus, including famous twitter-bootstrap one, use lists, since the markup is quite clean. Yes, you do have to clean up lists and remove bullets and reset padding/etc. It's best to apply the menu class and style it independently (vs. modifying ul/li for all). \$\endgroup\$ Commented Jul 8, 2014 at 20:12
  • \$\begingroup\$ You've only added the html, could add the css to your question ^ \$\endgroup\$ Commented Jul 9, 2014 at 13:59
  • 1
    \$\begingroup\$ Semantically, a drop down contains a list of items. \$\endgroup\$ Commented Jul 9, 2014 at 16:18

2 Answers 2

Reset to default
2
\$\begingroup\$

Lists are optional, but most people feel that you should use some sort of block level element to contain inline elements (some of the reasoning you'll hear is that the content still makes sense even if there's no styling or that you have a "list of options"). If you don't want to use a list, you'd be looking at elements like paragraph (which is wrong here since you're looking at text fragments) or the semantically void div to fill this role.

How does one look at inactive items from yesterday? To me, this looks like a misuse of form elements. The submit element isn't for changing state in a form, it is for submitting the contents of the form.

If you're only allowed to look at inactive or active items and never both, then a select element is what you should be using. If the data is allowed to be filtered by any combination (some/all/none), then you should be looking at checkboxes grouped together by a fieldset:

<form>
    <fieldset>
        <legend>Status</legend>

        <ul>
            <li><label><input type="checkbox" checked /> Active</label></li>
            <li><label><input type="checkbox" /> Inactive</label></li>
        </ul>
    </fieldset>

    <fieldset>
        <legend>Date</legend>

        <ul>
            <li><label><input type="checkbox" checked /> Today</label></li>
            <li><label><input type="checkbox" /> Yesterday</label></li>
        </ul>
    </fieldset>
</form>

http://jsfiddle.net/kx4w7/1/

\$\endgroup\$
1
\$\begingroup\$

Since you are using it as a controller, you should use datalist, and since those anchors go nowhere, you should use another element.

\$\endgroup\$

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.