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.

4 comments:

  1. 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
  2. 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
  3. 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

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 :-