How To Spice Up Your Menu Items

Have you looked at your menu items lately?

You hover over them and see the same old stuff.

Well today we are going to try and add some spice to those boring menu items.

Where does the spice come from

Today we will picking the spice from one of my favorite site for inspiration, Codrops. If you have never visited the site, I would take some time and have a look around there is so much stuff there I find it hard to come away empty handed. The amount of value there is off the scale.

The page we will be focused on is called Creative Link Effects . We are going to recreate the menu effect you see on this site and in later tutorials we will get to the more complicated ones.

Step 1

Click the download source button to get all the files. (make sure you have away to unzip the folder)

Step 2

Unzip the folder and find the component.css file. You can use Notepad++,  Brackets or Atom to view the file either will work.

Step 3

Scroll down to line 32. Copy line 32 to line 66 and paste that in your less/css area. This is what the copy and pasted code should look like.

 

/* Effect 1: Brackets */
.cl-effect-1 a::before,
.cl-effect-1 a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
	margin-right: 10px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.cl-effect-1 a::after {
	margin-left: 10px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

Step 4

Next we need to take the class of

.cl-effect-1

and add it to our menu section. You can find this option in either the menu or mega nav section in the advanced options.

iheart pagelines

Note that you also add the class to the actual menu item at appearance > menus . Just be sure to have css classes activated from the screen options.

And there you have it, if you have any questions leave them in the comments below.

-Cheers

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


How To Spice Up Your Menu Items

Published on by | Add Comment

Have you looked at your menu items lately?

You hover over them and see the same old stuff.

Well today we are going to try and add some spice to those boring menu items.

Where does the spice come from

Today we will picking the spice from one of my favorite site for inspiration, Codrops. If you have never visited the site, I would take some time and have a look around there is so much stuff there I find it hard to come away empty handed. The amount of value there is off the scale.

The page we will be focused on is called Creative Link Effects . We are going to recreate the menu effect you see on this site and in later tutorials we will get to the more complicated ones.

Step 1

Click the download source button to get all the files. (make sure you have away to unzip the folder)

Step 2

Unzip the folder and find the component.css file. You can use Notepad++,  Brackets or Atom to view the file either will work.

Step 3

Scroll down to line 32. Copy line 32 to line 66 and paste that in your less/css area. This is what the copy and pasted code should look like.

 

/* Effect 1: Brackets */
.cl-effect-1 a::before,
.cl-effect-1 a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
	margin-right: 10px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.cl-effect-1 a::after {
	margin-left: 10px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

Step 4

Next we need to take the class of

.cl-effect-1

and add it to our menu section. You can find this option in either the menu or mega nav section in the advanced options.

iheart pagelines

Note that you also add the class to the actual menu item at appearance > menus . Just be sure to have css classes activated from the screen options.

And there you have it, if you have any questions leave them in the comments below.

-Cheers

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match