How to create Google Like Menu Bar by using CSS Flex Property?

Hello Friends, Today I'm going to tell you that How we can create Google Like Menu Bar by using CSS Flex Property.

If you are not aware of Flex CSS Property then you should learn it from W3School or somewhere else.

Friends, The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container. Source: W3School

So Friends, Now we are going to start this tutorial. I posted some images below of How the menu bar look like by using Flex CSS Property.
Desktop Version of Google Style Menu bar
In this example you can see desktop version of the menu bar.
Mobile Version of Google Style Menu bar
In this example you can see mobile version of the menu bar.
Following is the HTML Code(index.html) for the Menu bar:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Made with Thimble</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <nav class="menu">
    <a class="blue">Home</a>
    <a class="red">About</a>
    <a class="orange">Service</a>
    <a class="green">Company</a>
    <a class="bloodred">Feedback</a>
  </nav>
  
  <h3>Google Styled Responsive Menubar using Flex...</h3>

</body>
</html>
Following is the CSS Code(style.css) for the Menu bar:
/*
Made with love for all by @pawan_mall
Basic css for decorating page for demo
*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

body{
  padding:0px;
  background-color: #d2d2d2;
}
h3{
  text-align: center;
  color: #4c4746;
}

/* 
Menubar style code start from here
Defined display property as flex
*/
.menu {
  font-family: 'Open Sans Condensed', sans-serif;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* 
Defined menu layout for mobile display
*/
@media(max-width:668px){
  .menu {
    display:flex;
    flex-direction: column;
    margin: 10px;
  } 
}
/* 
Defined menu layout for desktop display
*/
.menu > a{
  text-align: center;
  font-weight:bold;
  font-size:20px;
  color: #5a5a5a;
  cursor: pointer;
  padding: 10px; 
  background-color: #F1F0F7;
  box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all .2s ease-in; 
  border-top-style: solid;
  border-top-width: 5px;
}
.menu > a:hover{
  font-size: 25px;
  border-top-style: solid;
  border-top-width: 10px;
}

/* 
Defined and setup order of menu items and the color scheme
*/
a.blue{
  flex: 1;
  order: 1;
  border-top-color:#4285F4;
}
a.blue:hover{
  color: #FFFFFF;
  background-color: #4285F4;
  border-top-color:#4285F4;
}

a.red{
  flex: 1;
  order: 2;
  border-top-color:#EA4335;
}
a.red:hover{
  color: #FFFFFF;
  background-color: #EA4335;
  border-top-color:#EA4335;
}

a.orange{
  flex: 1;
  order: 3;
  border-top-color:#FBBC05;
}
a.orange:hover{
  color: #ffffff;
  background-color: #FBBC05;
  border-top-color:#FBBC05;
}

a.green{
  flex: 1;
  order: 4;
  border-top-color:#34A853;
}
a.green:hover{
  color: #ffffff;
  background-color: #34A853;
  border-top-color:#34A853;
}

a.bloodred{
  flex: 1;
  order: 5;
  border-top-color:#EA4335;
}
a.bloodred:hover{
  color: #ffffff;
  background-color: #EA4335;
  border-top-color:#EA4335;
}
See below demo and the snippets for the google style menu bar.
For further help, Questions or query please leave your valuable comments in comment box.

10 comments:

  1. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.

    web designing course in chennai

    ReplyDelete
  2. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress website development Chennai

    ReplyDelete
  3. At the time of property sale, these guarantee documents should have some form of ability to be transferred or re-issued to the incoming purchaser.real estate practice test

    ReplyDelete
  4. Very informative post! Thanks for taking your valuable time to share this with us. Looking forward for more posts from you.
    Manual Testing Training in Chennai
    Manual Testing Training in Tambaram

    ReplyDelete
  5. This article is well written and quite informative.
    More articles should be written and you have just found a follower.and more visit.
    mainframe training in hyderabad

    ReplyDelete
  6. Well, the menu is a significant part of any website as it is seen above all the content and control the navigation as well. Web designers design different styles of menu to grab attention of users and your post is very much helpful to design Google Menus.

    ReplyDelete
  7. Excellent Blog. I really want to admire the quality of this post. I like the way of your presentation of ideas, views and valuable content. No doubt you are doing great work. I’ll be waiting for your next post. Thanks .Keep it up!
    Kindly visit us @
    Luxury Boxes
    Premium Packaging
    Luxury Candles Box
    Earphone Packaging Box
    Wireless Headphone Box
    Innovative Packaging Boxes
    Wedding gift box
    Leather Bag Packaging Box
    Cosmetics Packaging Box
    Luxury Chocolate Boxes

    ReplyDelete
  8. Aluminium Composite Panel or ACP Sheet is used for building exteriors, interior applications, and signage. They are durable, easy to maintain & cost-effective with different colour variants.

    ReplyDelete

Thank you for your comment.

 Image

 Image

About



I'm something poet, marketer, social media consultant, web designer, web developer, web programmer, blogger(hobby) & a good human being. Originally from Gorakhpur, UP and currently living in the New Delhi. ..

Twitter
Facebook

Resume

Curriculum Vitae


Pawan Mall

Web Designer, Developer & Blogger

New Delhi, Delhi, INDIA
mailpawanmall.net
www.pawanmall.net
Pawan Mall - resume photo avatar

Objective

I'm something poet, marketer, social media consultant, web designer, web developer, web programmer, blogger(hobby) & a good human being. Originally from Gorakhpur, UP and currently living in the New Delhi. ..

Skills

  • Front-end
  • HTML/HTML5
  • CSS/CSS3
  • JS/jQuery
  • Bootstrap
  • Back-end
  • PHP/OOP
  • SQL/MySQL
  • Codeigniter Framework
  • cPanel & phpMyAdmin

Education

  • Sikkim Manipal University graduate of 2015.

Experience

  • Web Designer/Developer/Leads Manager ~ 2007-2017

Contact Form

Contact

  • New Delhi, Delhi, India

  • +91 **********

  • mailpawanmall.net

Follow me on :-