How To Centered Horizontal Menu With CSS

byMofizul -
You may need to create a navigation menu, which will remain in center on the website. Especially when you want to make a mobile friend navigation menu.

 If you search in Google or Yahoo, you'll find a lot of tutorials with jQuery, Javascript or CSS. All resources will not work for. But today I'll show you how to, you can make a nice navigation menu for your website with just CSS. 

 I have tested the CSS in my project, so you can read the article with full confidence that it will help you to make a navigation menu centered. It is not a time waster article.

 Think it's your HTML
<div class="foo">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

 Now write CSS for the navigation menu.
.foo {
text-align:center;
font-family:Helvetica;
font-weight:700;
margin-top:80px;
background:#333;
}

.foo ul {
display:inline-block;
}

.foo ul li {
display:inline-block;
padding:3px 6px;
}

.foo ul li a {
text-decoration:none;
text-align:center;
color:#FFC000;
font-size:22px;
text-transform:uppercase;
padding:19px 20px;
}

.foo ul li a:hover {
background:#474747;
}

 It will show you a good navigation menu. You can change the color, font-family, margin-apdding as you want.

 See the full code (HTML-CSS):
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS Centered Menu</title>
        <style>
        .foo{    
        text-align: center;    
        font-family: Helvetica;    
        font-weight: bold;    
        margin-top: 80px;    
        background: #333333;
            }
            .foo ul{  
            display: inline-block;
            }
            .foo ul li{    
            display: inline-block;    
            padding: 3px 6px;
            }
            .foo ul li a{    
            text-decoration: none;    
            text-align: center;    
            padding: 19px 20px;    
            color: #FFC000;    
            font-size: 22px;    
            text-transform: uppercase;
            }
            .foo ul li a:hover{  
            background: #474747;
            }
        </style>
    </head>
    <body>
        <div class="foo">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Videos</a></li>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </body>
</html>

 I've tested the menu in Chrome, Firefox and Internet Explorer latest version. It's not mobile supported, but you can make it mobile or tab supported if you know the CSS media query.

 Here I have used neat and clean CSS codes. No CSS hack code. I does not use any Javascript code. I have used only HTML and CSS.

 It is W3 validated HTML and CSS code. No error found. It is little bit re-sizable with browser resize. Already supported it on full screen.

 Don't forget to read more articles on Web Design, Development, Programming etc. Plus, send me a message through the contact page, if you want to show me that you have created a nice menu with the CSS and HTML.

 For more Tutorials keep visiting the Blog.

 Share it with your friend.

 Thanks.

Tags

একটি মন্তব্য পোস্ট করুন

নবীনতর পূর্বতন

যোগাযোগ ফর্ম