CODEWITHSUNDEEP
htmlmenucsshtml-lists
anon271334
anon271334

Reputation:

UL > LI CSS/HTML Question

I have multiple menus (ul) and each have li's inside them. For example, the main navigation menu for the site is horizontal. But, I also have several other menus for products on a page, and those menus are vertical.

I don't want to go adding class="verticalMenuOption" to all of the menus that I want to be vertical, because that just makes things look ugly in the code, and ugliness is very distracting for me.

Is there a way to have 1 menu with horizontal li's, and every other menu on the site horizontal li's?

Horizontal:

            <ul class="menu">
                <li class="selected"><a href="@Href("~/")">Home</a></li>
                <li><a href="@Href("~/")">Products</a></li>
                <li><a href="@Href("~/")">About Us</a></li>
                <li><a href="@Href("~/")">Help &amp; Support</a></li>
                <li><a href="@Href("~/")">Contact Us</a></li>
                <li class="selected"><a href="@Href("#")">My Account</a></li>
            </ul>

Vertical:

            <ul class="menu">
                <li class="selected"><a href="@Href("~/")">sample</a></li>
                <li><a href="@Href("~/")">sample</a></li>
                <li><a href="@Href("~/")">sample</a></li>
                <li><a href="@Href("~/")">sample</a></li>
                <li><a href="@Href("~/")">sample</a></li>
                <li class="selected"><a href="@Href("#")">sample</a></li>
            </ul>

Upvotes: 0

Views: 526

Answers (5)

user11978918
user11978918

Reputation: 

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
        #vertical li {
            display: block;
            float: left;
            padding-right: 15px;
            list-style-type: none;
        }
    </style>
</head>
<body>
    <ul class="menu" id="horizontal">
        <li class="selected"><a href="@Href("~/")">Home</a></li>
        <li><a href="@Href("~/")">Products</a></li>
        <li><a href="@Href("~/")">About Us</a></li>
        <li><a href="@Href("~/")">Help &amp; Support</a></li>
        <li><a href="@Href("~/")">Contact Us</a></li>
        <li class="selected"><a href="@Href("#")">My Account</a></li>
    </ul>
    <ul class="menu" id="vertical">
        <li class="selected"><a href="@Href("~/")">sample</a></li>
        <li><a href="@Href("~/")">sample</a></li>
        <li><a href="@Href("~/")">sample</a></li>
        <li><a href="@Href("~/")">sample</a></li>
        <li><a href="@Href("~/")">sample</a></li>
        <li class="selected"><a href="@Href("#")">sample</a></li>
    </ul>
</body>
</html>

Upvotes: 0

clairesuzy
clairesuzy

Reputation: 27624

usually each of those menus would be likely to have different ancestors, or parent divs.. maybe the horizontal one is in a div called "header" and the vertical content one in a div called "content" or "sidebar" - it doesn't matter if they're direct parents or not as long as they are unique in the ascendency

you can then target each list separately

#header .menu {.. your styles ..}
.content .menu  {.. your styles ..}

There's not really enough code here to explain properly, but there is usually a way of isolating an element without having to add more classes, if not then as already mentioned you can do that or you can add in the wrapper divs with ID's

Upvotes: 0

Nick
Nick

Reputation: 1325

Add an id to the menu you want to be horizontal

<ul id="horizontal" class="menu"> ... </ul>

<ul class="menu"> ... </ul>

then in your CSS file

#horizontal { display:inline }

Upvotes: 0

wildcard
wildcard

Reputation: 7503

make the default menu vertical (by accessing .menu class), and add a horizontal class to the one you want as horizontal + style it as horizontal.

Upvotes: 0

Tesserex
Tesserex

Reputation: 17314

I think you meant to say 1 horizontal, the others all vertical. But anyway, if vertical is the rule, and there's only one exception, style your ul to be vertical (which is default), and then make a single exception for the nav. If your nav has an id, you can use that as a css selector, like #nav, so you don't need to add a new css class.

Upvotes: 1

Related Questions