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.

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.
See the Pen <a href='https://codepen.io/iPawan/pen/vxqemK/'>Google Styled Responsive Menubar using Flex</a> by Pawan Mall (<a href='http://codepen.io/iPawan'>@iPawan</a>) on <a href='http://codepen.io'>CodePen</a>.

For further help, Questions or query please leave your valuable comments in comment box.

4 comments:

Mark RobertsDecember 30, 2018 at 4:35 PM
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
Praylin SJanuary 7, 2019 at 3:11 PM
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
D Amies TechnologiesMay 31, 2019 at 3:26 PM
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.
KITDecember 11, 2019 at 12:16 PM
A very inspiring blog your article is so convincing that I never stop myself to say something about it.

Thank you for your comment.

Pawan Mall : Blog

Search Box

Labels

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

Like this post? Then, Share it

4 comments:

Image

About

Resume

Curriculum Vitae

Pawan Mall

Web Designer, Developer & Blogger

New Delhi, Delhi, INDIA

mailpawanmall.net

www.pawanmall.net

Objective

Skills

Education

Experience

Contact Form

Contact