Home Web Design CSS CSS Menu Icon Transforms With jQuery Toggle | Navicon Transformation

CSS Menu Icon Transforms With jQuery Toggle | Navicon Transformation

December 11, 2019

3048

How we can create different types of menu icon transformation using CSS? Solution: See this CSS Menu Icon Transforms With jQuery Toggle, Navicon Transformation.

Previously I have shared menu related programs, but this is only about different types of menu icons. Basically, this a hamburger menu icon that transforms into different icons. When we use this kind of hamburger icon on the website, after click it transforms into a cross or close icon. But some times we see a different icon appears after clicking the menu icon.

Today you will learn to create the Navicon Transformation program. Basically, there is 6 hamburger menu icon which transforms into a different icon on clicking. After transforming these become: cross icon, plus icon, minus icon, left arrow icon, right arrow icon, and up arrow icon. And there is a toggle feature, after second click the icons become back menu icon.

So, Today I am sharing the CSS Menu Icon Transforms With jQuery Toggle. There I have used pure CSS to creating the icons but the toggle feature is based on jQuery. As we know jQuery is a JS library that’s why I am putting this post in the JavaScript category. This program is a good practice for HTML & CSS, also you can use on your website.

If you are thinking now how this icon transformations actually are, then see the preview given below.

Preview Of Navicon Transformation

See this video preview to getting an idea of how this icon looks like.

Live Demo

Now you can see this visually, also you can see it live by pressing the button above. If you like this, then get the source code of its.

CSS Menu Icon Transforms With jQuery Toggle Source Code

Before sharing source code, let’s talk about it. First I have created the layout using HTML <section> tag and <nav> tag. I have created the section tag as the main element and placed others inside it. For each icon, I have created a hyperlink tag and placed a div inside it. And in the HTML file, I have linked other files like CSS, JS, and jQuery CDN link.

Now using CSS I have placed all the elements in the right places, as you can see in the preview. Using CSS I gave style, size, position, etc to the elements. There I have heavily used CSS :before and :after commands for creating the icons, and inside these tags, I have used transform command.

jQuery handling here the toggle feature of this program, and it has 2 lines of codes. There I have used .click(function()) command to detect the click and managing the toggle. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Menuicon Transforms | Webdevtrick.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<section>
  <nav>
    <a class="menuicon-button x">
      <div class="menuicon"></div>
    </a>
    <a class="menuicon-button plus">
      <div class="menuicon"></div>
    </a>
    <a class="menuicon-button">
      <div class="menuicon"></div>
    </a>
    <a class="menuicon-button leftarr">
      <div class="menuicon"></div>
    </a>
    <a class="menuicon-button rightarr">
      <div class="menuicon"></div>
    </a>
    <a class="menuicon-button upperarr">
      <div class="menuicon"></div>
    </a>    
  
  </nav>
  <h1>Click on the icons</h1>
	
</section>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Menuicon Transforms | Webdevtrick.com</title>

</head>

<body>

<nav>

</a>

</a>

</a>

</a>

</a>

</a>

</nav>

<h1>Click on the icons</h1>

</section>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
@charset "UTF-8";
* {
  box-sizing: border-box;
}
html {
  font-size: 100%;
}
html, body, section {
  position: relative;
}
body {
  font-family: sans-serif;
  background: #f3f3f3;
  padding: 1.5rem 1.5rem 0;
  backface-visibility: hidden;
  margin-top: 15%;
}
section {
  max-width: 40rem;
  margin: 0 auto;
  border-radius: .5rem .5rem .5rem .5rem;
  background: #FFF;
  overflow: hidden;
}
section *, section *:before, section *:after {
  transform: translate3d(0, 0, 0);
}
nav {
  display: flex;
  justify-content: space-between;
  height: 4.5rem;
  background: #1c1d31;
  text-align: right;
  border-radius: .5rem .5rem 0 0;
  padding: 0 1rem;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
h1 {
  text-align: center;
  padding: 1.5rem;
  transition: 1s;
  pointer-events: none;
  text-transform: uppercase;
}
#carbonads {
  display: block;
  overflow: hidden;
  max-width: 180px;
  font-size: 14px;
  margin: 0 2em;
  background: rgba(39, 67, 128, 0.1);
  padding: .5em;
  border-radius: 1rem;
}
#carbonads:hover {
  color: dodgerblue;
}
#carbonads a {
  color: inherit;
  text-decoration: none;
}
.carbon-img img {
  display: block;
  margin: 1rem auto;
  width: 100%;
  height: auto;
  background: white;
  border-radius: 5px;
}
.carbon-text {
  display: block;
  padding: 0 1rem;
}
.carbon-poweredby {
  display: block;
  padding: 1rem 1rem .5rem;
  font-size: smaller;
  opacity: .5;
}
.menuicon-button {
  display: inline-block;
  position: relative;
  padding: 2.0625rem 1.5rem;
  transition: 0.25s;
  cursor: pointer;
  user-select: none;
  opacity: .8;
}
.menuicon-button .menuicon:before, .menuicon-button .menuicon:after {
  transition: 0.25s;
}
.menuicon-button:hover {
  transition: 0.5s;
  opacity: 1;
}
.menuicon-button:hover .menuicon:before, .menuicon-button:hover .menuicon:after {
  transition: 0.25s;
}
.menuicon-button:hover .menuicon:before {
  top: .825rem;
}
.menuicon-button:hover .menuicon:after {
  top: -.825rem;
}
.menuicon {
  position: relative;
  width: 2.5em;
  height: .3125rem;
  background: #FFF;
  transition: 0.5s;
  border-radius: 2.5rem;
}
.menuicon:before, .menuicon:after {
  display: block;
  content: "";
  height: .3125rem;
  width: 2.5rem;
  background: #FFF;
  position: absolute;
  z-index: -1;
  transition: 0.5s 0.25s;
  border-radius: 1rem;
}
.menuicon:before {
  top: .625rem;
}
.menuicon:after {
  top: -.625rem;
}
.open:not(.steps) .menuicon:before,
.open:not(.steps) .menuicon:after {
  top: 0 !important;
}
.open .menuicon:before,
.open .menuicon:after {
  transition: 0.5s;
}
.open {
  transform: scale(0.75);
}
.open.leftarr .menuicon:before, .open.leftarr .menuicon:after,
.open.rightarr .menuicon:before,
.open.rightarr .menuicon:after,
.open.upperarr .menuicon:before,
.open.upperarr .menuicon:after {
  width: 1.5rem;
}
.open.leftarr .menuicon:before,
.open.rightarr .menuicon:before,
.open.upperarr .menuicon:before {
  transform: rotate(35deg);
  transform-origin: left top;
}
.open.leftarr .menuicon:after,
.open.rightarr .menuicon:after,
.open.upperarr .menuicon:after {
  transform: rotate(-35deg);
  transform-origin: left bottom;
}
.open.upperarr {
  transform: scale(0.75) rotate(90deg);
}
.open.rightarr .menuicon:before {
  transform: translate3d(1em, 0, 0) rotate(-35deg);
  transform-origin: right top;
}
.open.rightarr .menuicon:after {
  transform: translate3d(1em, 0, 0) rotate(35deg);
  transform-origin: right bottom;
}
.open.plus .menuicon,
.open.x .menuicon {
  background: transparent;
}
.open.plus .menuicon:before,
.open.x .menuicon:before {
  transform: rotate(-45deg);
}
.open.plus .menuicon:after,
.open.x .menuicon:after {
  transform: rotate(45deg);
}
.open.plus {
  transform: scale(0.75) rotate(45deg);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

/* Code By Webdevtrick ( https://webdevtrick.com ) */

@charset "UTF-8";

* {

box-sizing: border-box;

}

html {

font-size: 100%;

}

html, body, section {

position: relative;

}

body {

font-family: sans-serif;

background: #f3f3f3;

padding: 1.5rem 1.5rem 0;

backface-visibility: hidden;

margin-top: 15%;

}

section {

max-width: 40rem;

margin: 0 auto;

border-radius: .5rem .5rem .5rem .5rem;

background: #FFF;

overflow: hidden;

}

section *, section *:before, section *:after {

transform: translate3d(0, 0, 0);

}

nav {

display: flex;

justify-content: space-between;

height: 4.5rem;

background: #1c1d31;

text-align: right;

border-radius: .5rem .5rem 0 0;

padding: 0 1rem;

user-select: none;

-webkit-tap-highlight-color: transparent;

}

h1 {

text-align: center;

padding: 1.5rem;

transition: 1s;

pointer-events: none;

text-transform: uppercase;

}

#carbonads {

display: block;

overflow: hidden;

max-width: 180px;

font-size: 14px;

margin: 0 2em;

background: rgba(39, 67, 128, 0.1);

padding: .5em;

border-radius: 1rem;

}

#carbonads:hover {

color: dodgerblue;

}

#carbonads a {

color: inherit;

text-decoration: none;

}

.carbon-img img {

display: block;

margin: 1rem auto;

width: 100%;

height: auto;

background: white;

border-radius: 5px;

}

.carbon-text {

display: block;

padding: 0 1rem;

}

.carbon-poweredby {

display: block;

padding: 1rem 1rem .5rem;

font-size: smaller;

opacity: .5;

}

.menuicon-button {

display: inline-block;

position: relative;

padding: 2.0625rem 1.5rem;

transition: 0.25s;

cursor: pointer;

user-select: none;

opacity: .8;

}

.menuicon-button .menuicon:before, .menuicon-button .menuicon:after {

transition: 0.25s;

}

.menuicon-button:hover {

transition: 0.5s;

opacity: 1;

}

.menuicon-button:hover .menuicon:before, .menuicon-button:hover .menuicon:after {

transition: 0.25s;

}

.menuicon-button:hover .menuicon:before {

top: .825rem;

}

.menuicon-button:hover .menuicon:after {

top: -.825rem;

}

.menuicon {

position: relative;

width: 2.5em;

height: .3125rem;

background: #FFF;

transition: 0.5s;

border-radius: 2.5rem;

}

.menuicon:before, .menuicon:after {

display: block;

content: "";

height: .3125rem;

width: 2.5rem;

background: #FFF;

position: absolute;

z-index: -1;

transition: 0.5s 0.25s;

border-radius: 1rem;

}

.menuicon:before {

top: .625rem;

}

.menuicon:after {

top: -.625rem;

}

.open:not(.steps) .menuicon:before,

.open:not(.steps) .menuicon:after {

top: 0 !important;

}

.open .menuicon:before,

.open .menuicon:after {

transition: 0.5s;

}

.open {

transform: scale(0.75);

}

.open.leftarr .menuicon:before, .open.leftarr .menuicon:after,

.open.rightarr .menuicon:before,

.open.rightarr .menuicon:after,

.open.upperarr .menuicon:before,

.open.upperarr .menuicon:after {

width: 1.5rem;

}

.open.leftarr .menuicon:before,

.open.rightarr .menuicon:before,

.open.upperarr .menuicon:before {

transform: rotate(35deg);

transform-origin: left top;

}

.open.leftarr .menuicon:after,

.open.rightarr .menuicon:after,

.open.upperarr .menuicon:after {

transform: rotate(-35deg);

transform-origin: left bottom;

}

.open.upperarr {

transform: scale(0.75) rotate(90deg);

}

.open.rightarr .menuicon:before {

transform: translate3d(1em, 0, 0) rotate(-35deg);

transform-origin: right top;

}

.open.rightarr .menuicon:after {

transform: translate3d(1em, 0, 0) rotate(35deg);

transform-origin: right bottom;

}

.open.plus .menuicon,

.open.x .menuicon {

background: transparent;

}

.open.plus .menuicon:before,

.open.x .menuicon:before {

transform: rotate(-45deg);

}

.open.plus .menuicon:after,

.open.x .menuicon:after {

transform: rotate(45deg);

}

.open.plus {

transform: scale(0.75) rotate(45deg);

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
$("a").click(function(){
  $(this).toggleClass("open");
});

// Code By Webdevtrick ( https://webdevtrick.com )

$("a").click(function(){

$(this).toggleClass("open");

});

That’s It. Now you have successfully created CSS Menu Icon Transforms With jQuery Toggle, Navicon Transformation Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

CSS Menu Icon Transforms With jQuery Toggle | Navicon Transformation

Preview Of Navicon Transformation

CSS Menu Icon Transforms With jQuery Toggle Source Code

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY