www.webdeveloper.com
Results 1 to 4 of 4

Thread: Make Menu Bar flexible

  1. #1
    Join Date
    Sep 2006
    Posts
    192

    Make Menu Bar flexible

    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.
    Last edited by scottjsn; 08-18-2012 at 11:14 AM.

  2. #2
    Join Date
    Aug 2006
    Posts
    1,904
    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

  3. #3
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    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>
    JavaScript: Learn | Validate | Compact | bionoid

  4. #4
    Join Date
    Sep 2006
    Posts
    192
    Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles