How to Make a Twitter Navigational Bar in CSS

Navigation bars created in CSS let you streamline navigation code and create a visually appealing navigation layout for your users. If you want to create a navigation panel for Twitter, add a link to your current navigation layout that points to your Twitter account. This lets your users navigate to the Twitter page where you make announcements and gain followers.

Instructions

1. Right-click your current HTML page that contains your navigation bar. Click "Open With" and choose a CSS or HTML editor from the list of programs.

2. Add the "div" container for your Twitter link. Copy and paste the following code to the end of your navigation code:

   <div id="twitter">
   </div>

   The code for the link that sends users to your Twitter page is placed between these two div tag definitions.

3. Add the Twitter link to the navigation. The following code links to a Twitter account named "myaccount":

   <a href="twitter.com/myaccount">My Twitter</a>

   Replace "myaccount" with your Twitter account name.

4. Add the CSS class for your navigation. The class is added to the div container that displays the Twitter link. Add the following code to your div container's definition:

   class="cssid"

   Replace "cssid" with the class that displays in your other navigation links.

5. Save the changes and open the file in your browser to test the links and code changes.

References

• Crunchy Blogger: How to Create Nav Bar By Using XHTML and CSS