Speed edit for kids. Learn how to create a menu icon with CSS.
Quick CSS Menu for Mac. 30 downloads Updated: September 22, 2015 Commercialware. Review Free Download specifications 100% CLEAN report malware. Easily create menus for your websites with this useful app that offers an intuitive design process and automatically generates HTML and CSS. If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Example Explained. The width and the height property specifies the width and height of each bar. We have added a black background-color, and the top and bottom margin is used to create some distance between each bar.
How To Create a Menu Icon
If you are not using an icon library, you can create a basic menu icon with CSS:
Menu Icon:
Animated Menu Icon (click on it):
Step 1) Add HTML:
Example
Step 2) Add CSS:
Example
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Try it Yourself »width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Example Explained
The
width
and the height
property specifies the width and height of each bar.We have added a black
background-color
, and the top and bottom margin
is used to create some distance between each bar. Animated Icon
Use CSS and JavaScript to change the menu icon to a 'cancel/remove' icon when it is clicked on: Games for mac free online.
Step 1) Add HTML:
Example
<div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
<div></div>
<div></div>
</div>
Step 2) Add CSS:
Example
![Css menu for mac shortcut Css menu for mac shortcut](/uploads/1/2/8/3/128332658/567799826.jpg)
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
Css Menu For Mac Catalina
Step 3) Add JavaScript:
Example
function myFunction(x) {
x.classList.toggle('change');
}
Try it Yourself »x.classList.toggle('change');
}
Example Explained
HTML & CSS: We use the same styles as before, only this time, we wrap a container element around each <div> element and we specify a class name for each.
The container element is used to show a pointer symbol when the user moves the mouse over the divs (bars). When it is clicked on, it will execute a JavaScript function that adds a new class name to it, which will change the styles of each horizontal bar: the first and the last bar is transformed and rotated to the letter 'x'. The bar in the middle fades out and becomes invisible.