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.

Resume

Curriculum Vitae

Pawan Mall

Web Designer, Developer & Blogger

New Delhi, Delhi, INDIA

mailpawanmall.net

www.pawanmall.net

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

Pawan Mall : Blog

Search Box

Labels

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

Like this post? Then, Share it

6 comments:

Image

About