Make Menu Bar flexible

**scottjsn** · 08-18-2012 10:58 AM

I use the list to present the menu bar:

<ul id="p" style="border-top:none; border-bottom:none;">
<li id="c1" class="list"><a href="#">abc</a></li>
<li id="c2" class="list"><a href="#">def</a></li>
<li id="c3" class="list"><a href="#">ghi</a></li>
...
...
<li id="cx" class="list"><a href="#">xyz</a></li>
</ul>

When displyed, it shows:

abc def ghi ... xyz

The problem is, it works for the monitor 15 inch or above. When the monitor size goes below the 15, such as 14 inch, the menu items wraps such that it becomes:

abc def ghi ...
xyz

I would like to get two methods:

1) stretchable. The menu items can dynamically stretch along with the monitor's size such that the gap between the items becomes wider or narrower. Nevertheless, they can all remain on the same line.

2) non-stretchable. Regardless the size of the monitor, the menu items will always stay on the same line. When the monitor's size becomes smaller, the user can use the horizontal scrollbar to view the rest of the menu items.

How can I do it?

P.S. Do not know how the 'Angry' face icon got there. Please do ignore it.

**tracknut** · 08-18-2012 11:50 AM

This is not technically a problem with the monitor size, it is a problem with the browser window size.

1) You can specify your LI items as a percentage of the window size, rather than as fixed width in pixels.
2) you can specify the container of this UL in fixed pixels, large enough to contain the UL horizontally.

Dave

**bionoid** · 08-18-2012 12:39 PM

I don't personally use <li> for anything but lists, so here is a flexible menu example with just the <a> tags:

Code:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Flexible Menu</title>

		<style type="text/css">

			.Heading {
				text-align: center;
				margin-top: 30px;
			}

			.Menu {
				text-align: center;
				white-space: nowrap;
			}
			.Menu A {
				display: inline-block;
				width: 19.5&#37;;
				margin-right: 1px;
				color: #fff;
				background-color: #00f;
				height: 1.5em;
				line-height: 1.5em;
				text-decoration: none;
			}
			.Menu A:hover {
				color: #000;
				background-color: #f00;
			}

		</style>

	</head>
	<body>

		<div class="Heading">Stretchable</div>
		<div class="Menu"><a href="#">Home</a><a href="#">Portfolio</a><a href="#">Personal</a><a href="#">About Us</a><a href="#">Contact Us</a></div>

		<div class="Heading">Non-Stretchable</div>
		<div class="Menu" style="width: 700px; margin: 0 auto;"><a href="#">Home</a><a href="#">Portfolio</a><a href="#">Personal</a><a href="#">About Us</a><a href="#">Contact Us</a></div>

	</body>
</html>

**scottjsn** · 08-18-2012 07:51 PM

Thanks.

Thread: Make Menu Bar flexible

Thread Tools

Display

Make Menu Bar flexible

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions