Hamburger - 10

What do you call the 3 lines icon?

Appearance and functionality. The "menu" button takes the form of an icon that consists of three parallel horizontal lines (displayed as ≡), suggestive of a list. The name refers to its resemblance to the menu that is typically exposed or opened when interacting with it.

Where is the hamburger icon?

The hamburger menu or hamburger icon is a name given to the menu icon found in newer programs and websites that hides the traditional file menu. Alternatively referred to as the hotdog menu, three-line menu, or menu button using the hamburger menu makes it easier to view program options on mobile devices.

What is hamburger in HTML?

By clicking on this control, you activate some information or navigation that is hidden by default for UX purposes. This usually means activating a SideNav, but might also roll down a Navbar menu. Examples of Bootstrap hamburger menu use include: Navbar menu. ...

Are hamburger menus bad?

In conclusions, hamburger menu has its good share of bad and good for user navigations. It can be used for good things like what Uber did, but it can also make a confusing and bad IA. It's all up to you how you decide your mobile web and apps gonna look, and how the user can navigate through your products.

Why avoid Hamburger Menus?

It is a familiar pattern to see the menu in the top left, although it isn't ideally placed for right handed users (the majority), who use the device in one hand.

Real time example

Inspect the HTML

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger - 1</title>
</head>
<style>
.container{
width: 100%;
margin: 0 auto;
text-align: center;
}
.rows .three{
padding: 80px 30px;
background-color: #2c3e50;
color: #ecf0f1;
text-align: center;
}
.hamburger .line{
width: 50px;
height: 5px;
background-color: #ecf0f1;
display: block !important;
margin: 8px auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger:hover{
cursor: pointer;
}

#hamburger-11{
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

#hamburger-11.is-active{
animation: smallbig 0.6s forwards;
}

@keyframes smallbig{
0%, 100%{
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}

50%{
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
}

#hamburger-11.is-active .line:nth-child(1),
#hamburger-11.is-active .line:nth-child(2),
#hamburger-11.is-active .line:nth-child(3){
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}

#hamburger-11.is-active .line:nth-child(2){
opacity: 0;
}

#hamburger-11.is-active .line:nth-child(1){
-webkit-transform: translateY(13px) rotate(45deg);
-ms-transform: translateY(13px) rotate(45deg);
-o-transform: translateY(13px) rotate(45deg);
transform: translateY(13px) rotate(45deg);
}

#hamburger-11.is-active .line:nth-child(3){
-webkit-transform: translateY(-13px) rotate(-45deg);
-ms-transform: translateY(-13px) rotate(-45deg);
-o-transform: translateY(-13px) rotate(-45deg);
transform: translateY(-13px) rotate(-45deg);
}
</style>
<body>
<div class="container">
<div class="rows cf">
<div class="three col">
<div class="hamburger" id="hamburger-11" onclick="myFunction(this)">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("is-active");
}
</script>
</body>
</html>

Download this HTML Source Code

Front End Developer

HamBurger Version_10

What do you call the 3 lines icon?

Where is the hamburger icon?

What is hamburger in HTML?

Are hamburger menus bad?

Why avoid Hamburger Menus?

Real time example

Inspect the HTML

Download this HTML Source Code

Direct Download

Go to the Home Page

Post a Comment

0 Comments

Contact Form

Popular Posts

HTML notes for Professional

CSSNotesForProfessionals

JavaScriptNotesForProfessionals

HTML5 Programming With Javascript For Dummies

MySQLNotesForProfessionals

HTML5 Games Development By Example

MicrosoftSQLServerProfessionalTipsSecrets

PHP And MySQL For Dummies 3rd Edition

Advanced PHP Programming

The Truth About HTML5 - FreePdfBook

Search This Blog

Labels

Footer Menu Widget

HamBurger Version_10

What do you call the 3 lines icon?

Where is the hamburger icon?

What is hamburger in HTML?

Are hamburger menus bad?

Why avoid Hamburger Menus?

Real time example

Inspect the HTML

Download this HTML Source Code

Direct Download

Go to the Home Page

You may like these posts

Post a Comment

0 Comments

Social Plugin

Contact Form

Popular Posts

Search This Blog

Labels

Footer Menu Widget