HomeОбразованиеRelated VideosMore From: Learning Simplified

HOW TO CREATE SIMPLE HORIZONTAL NAVIGATION BAR - CSS TUTORIAL FOR BEGINNERS

2 ratings | 156 views
We are about to create a simple, horizontal navigation menu bar in this part of CSS Tutorial for Beginners || by Learning Simplified In this tutorial, we have created a horizontal menu bar using Html and Css. In this process, we first created the list items in HTML and then customized the list item in CSS. In doing so, all we had to do first is to create a class name in our stylesheet.css, then had to create a div element in Html and call the class name against the div element. Then we are creating a list item inside the same div and customized it in our .CSS file. At the beginning, you will find a vertical list with bullet text formats, but on completion of customization, we will be able to see the exact match of menu bar with the proposed template. Things we are going to know from this tutorial : 1) How to create a div element in HTML 2) How to create a class name in stylesheet.css 3) Calling the class name into our main .html file 4) Creating the unordered list in Html 5) Creating the list items inside the unordered list inside the div with specific class name 6) Creating anchor tags and setting hyperlink references for the list items inside the unordered list of same div with specific class name. 7) Customizing the unordered list and its list items inside the specific class name, 'menubar' in this case. 8) Setting float to left condition to display our menu horizontal 9) Setting width of the containing div and its unordered list at a same width and height. 10) Setting list-style of un-ordered list to none to avoid display of any kind of bullet text format. 11) Setting display property of anchor tags to block and setting width accordingly. for example, we set the width of unordered list and its parent div to 800px, and list-items present here are five, so width of each block should be 800/5 = 160px, provided no border is applied to the blocks. Addition of borders will count to corresponding curtail from the width and height of containing block. 12) Setting up line-height, color, text-shadow, text-transform, alignment and other necessary properties to the anchor tag element. ====================================================== If you want to know how to hover background colors and using active class property in each menu bar items, here's the link for the particular tutorial: https://www.youtube.com/watch?v=_m7wCR780qM&t=25s&list=PL_LJwD6PHOdZ3qk7R_-UAzqVT_rZQMlGA&index=16 ==================================================== Stay tuned to our channel to learn more: https://www.youtube.com/channel/UCNBuByD9iIgqElwmIIqoIiA ===================================================== Watch for relevant blogs at : http://learnsimple1987.blogspot.in/ ===================================================== Our G+ profile is at: https://plus.google.com/u/0/b/108616648678138902856/108616648678138902856 ===================================================== Twit us at: https://twitter.com/learnmaniac1987 =====================================================watch us at facebook : https://www.facebook.com/learnmaniac1987/ ====================================================== IF YOU LIKED OUR VIDEO, DON'T FORGET TO SHARE, LIKE, MAKE COMMENT, AND EVEN SUBSCRIBE!! =================================================== -~-~~-~~~-~~-~- Please watch: "JavaScript Tutorial for Beginners #12- Make a Basic Calculator" https://www.youtube.com/watch?v=Y0rmLwq4nto -~-~~-~~~-~~-~-
Html code for embedding videos on your blog
Text Comments (0)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.