• Buffer

Horizontal Sliding menu using CSS

This tutorial explain you how to Develop a Horizontal Sliding menu using CSS for your website . This will help you to create the most simple & Attractive Horizontal Sliding menu using CSS .

The final result is something like this:

Horizontal-Sliding-menu-usi Step 1: HTML page:

Create a new HTML page and copy and paste the following code inside <body> tag:

  <div id="Layer3">
  <ul id="menu">
  <li>
    <a href="#nogo"><img src="delicious_48.png" alt="Delicious" width="60" height="60" title="Delicious" />
     <span><br />
      <b class="h2">Delicious</b><br />
      Add to delicious
     </span>
    </a>
   </li>
   <li>
    <a href="#nogo"><img src="twitter_icons_48.png" alt="Twitter" width="60" height="60" title="Twitter" />
     <span>
      <br />
      <b class="h2">Twitter</b><br />
      Retweet the Article
     </span>
    </a>
   </li>
   <li>
    <a href="#nogo"><img src="mixx_logo_48.png" alt="Mixx" width="60" height="60" title="Mixx" />
     <span><br />
      <b class="h2">Mixx</b><br />
        &nbsp Mixx it
     </span>
    </a>
   </li>
   <li>
    <a href="#nogo"><img src="rss-icon.png" alt="RSS" width="60" height="60" title="RSS" />
     <span><br />
      <b class="h2">Dreamcss </b><br />
      Subscribe Us
     </span>
    </a>
   </li>
    <li>
    <a href="#nogo">
     <img src="google.png" alt="Google" width="60" height="60" title="Google" />
     <span><br />
      <b class="h2">Google</b><br />
      Bookmark the Article
     </span>
    </a>
   </li>
   <li>
    <a href="#nogo"><img src="facebook_48.png" alt="Facebook" width="60" height="60" title="Facebook" />
     <span><br />
      <b class="h2">Facebook</b><br />
      Add to Facebook
     </span>
    </a>
   </li>
    <li>
    <a href="#nogo"><img src="stumble-upon.png" alt="Stumble Upon" width="60" height="60" title="Stumble Upon" />
     <span><br />
      <b class="h2">Stumble Upon </b><br />
      &nbsp Review or thumb-up
     </span>
    </a>
   </li>
  </ul>
</div>

Step 2:CSS file :

Create a new CSS file and copy and paste the following code for Horizontal Sliding menu using CSS (remeber to link this file in your HTML page):

#menu {
  margin:0;
  padding:0;
  width: 50em;
  height: 4.5em;
  overflow:hidden;
  }
#menu li {
  display:inline;
  list-style-type:none;
  }
#menu li a {
  display:block;
  float:left;
  text-decoration:none;
  margin:0;
  }
#menu li a img {
  opacity:0.7;
  margin:0.5em;
  border:0;
  float:left;
  }
#menu li a span {
  display:none;
  }
#menu li a:hover {
  background:transparent;
  }
#menu li a:hover span {
  width:10em;
  color:#aaa;
  display:block;
  cursor:pointer;
  float:left;
  }
#menu .h2 {
  margin:0 5px;
  padding:0;
  color:#fc0;
  font-variant:small-caps;
  font-size:1.25em;
  border:0;
  }

Save and test the result!

button-4109 button-310

    Search This Blog

    Loading...

    COPYRIGHT

    The content is copyrighted to Dreamcss.com and may not be reproduced on other websites without permission.

    CONTACT/ TIP US

    Write to us at admin@dreamcss.com if you have any comments, questions, suggestions about this site or would like to send us a tip.

    SUBCRIBE

    If you enjoyed this blog, subscribe to receive more just like it.

| | privacy policy