Results 1 to 2 of 2

Thread: [CSS2] Horizontal Navigation Bar

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    [CSS2] Horizontal Navigation Bar

    The following code docks a <h1> element to the left of the navigation and all <a> elements to the right of the navigation. It displays correctly in Internet Explorer 6 on up, but I cannot guarantee anything before that.

    HTML:
    HTML Code:
    <ul class="navigation">
      <li><h1>Logo</h1></li>
      <li>
        <ul>
          <li><a href="#bg-1">Link 1</a></li>
          <li><a href="#bg-2">Link 2</a></li>
          <li><a href="#bg-3">Link 3</a></li>
          <li><a href="#bg-4">Link 4</a></li>
        </ul>
      </li>
    </ul>
    CSS:
    Code:
    ul.navigation {
      color: #777;
      list-style-type: none;
      margin: 0;
      padding: .75em .25em;
      width: 100%;
    }
    
    ul.navigation li {
      display: inline;
      line-height: 2em;
      margin: 0;
      padding: 0;
    }
    
    ul.navigation h1 {display: inline;}
    
    ul.navigation ul {
      display: inline;
      float: right;
    }
    
    ul.navigation a {
      color: inherit;
      font-size: 1.25em;
      padding: 0 .25em;
      text-decoration: none;
    }
    
    ul.navigation a:hover {color: #0074D9;}
    Fiddle: http://codepen.io/anon/pen/VmoxwR

    When put through the W3 Validation Service, it is successfully checked as XHTML 1.0 Strict.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    Member
    Join Date
    Jul 2019
    Location
    Ahmedabad
    Posts
    57

    Re: [CSS2] Horizontal Navigation Bar

    Please try this code, To Horizontal Navigation Bar

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    body {margin: 0;}
    
    ul.topnavigation {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }
    
    ul.topnavigation li {float: left;}
    
    ul.topnavigation li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    ul.topnavigation li a:hover:not(.active) {background-color: #111;}
    
    ul.topnavigation li a.active {background-color: #4CAF50;}
    
    ul.topnavigation li.right {float: right;}
    
    @media screen and (max-width: 600px) {
      ul.topnavigation li.right, 
      ul.topnavigation li {float: none;}
    }
    </style>
    </head>
    <body>
    
    <ul class="topnavigation">
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li class="right"><a href="#about">About</a></li>
    </ul>
    
    <div style="padding:0 16px;">
      <h2>Responsive Topnav Example</h2>
      <p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p>
      <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
      <h4>Resize the browser window to see the effect.</h4>
    </div>
    
    </body>
    </html>
    I hope this code will be useful to you.
    Thank you.
    < advertising removed by moderator >

Posting Permissions

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



Click Here to Expand Forum to Full Width