Today I will be walking you through how to create a custom drop down menu in WordPress. We will be using the WordPress menu system to control the structure of the menu and then applying our own custom styles to the WordPress theme.

The menu I will be explaining is fully responsive and works with touch devices, so there is a little bit of jQuery code needed to make sure everything is cross browser compatible.

Demo

Here is what our menu is going to look like when we are finished. Resize the screen to see what the responsive version looks like.

Requirements

Ability to edit your theme’s functions.php file

Ability to upload files to your theme’s directory.

Basic understanding of CSS and PHP

Create a Menu in WordPress

Before we can start styling our menu, we need to first create the HTLM structure using the WordPress menu system. You probably already have a menu built in WordPress, but if you don’t head over to Appearance > Menus and create one. WordPress provides a easy to use interface to allows you to drag and drop menu items into a hierarchy. When you are done creating your menu structure, give the menu a name and then save it.

A Custom Walker Class

Before adding our CSS and jQuery to the menu, we first need to make sure that the HTML being outputted for the menu is nice and clean. I’ve created a custom WordPress Walker Class that does just that. The WordPress Walker Class takes the structure of your menu and then prints out the corresponding HTML. The Walker class below makes sure we have nice, clean HTML to work with and that our menu items have the correct CSS classes assigned to them.

To use this Walker class, simply copy and paste it to the bottom of your theme’s functions.php file. If you don’t see a functions.php file, then create one and paste the code in.

Print the Menu

Now we need to print out our menu using the wp_nav_menu() function. Where ever you place this next bit of code is where you menu will be printed out. I’m using one of the default themes so I’m printing my menu in the header.php file. This will be different for you though depending on where you want your menu to show up.

Using PHP we will pass this function the parameters of our menu so that it can print out the HTML structure. The ‘menu’ parameter is the name of the menu you created in WordPress. The ‘container_id’ will add an ID to the menu’s containing DIV. The ‘Walker’ parameter is telling the wp_nav_menu() function to use our custom WordPress walker class to print the HTML.

PHP

1

2

3

4

5

6

7

<?php

wp_nav_menu(array(

'menu'=>'Main Navigation',

'container_id'=>'cssmenu',

'walker'=>newCSS_Menu_Walker()

));

?>

Once you have placed this code in your theme’s template file, save the file and then refresh your site in the browsers. We have not added any styles or jQuery so you should see a plain HTML list being printed out like the one below.

The CSS

Now we need to add the CSS styles to our menu so open up your themes CSS file. It might be in a folder called css/styles.css or just a file in the root directory of the theme. I’ll break up the CSS to explain it a little bit, but you can also skip ahead and just copy and paste all the code in at one time.

Notice that we are using CSS ID that we specified in the wp_nav_menu() function, #cssmenu.

This first bit of CSS takes care of the browser resets so that everything is uniform. We are also using the free Google Font PT Sans that we are importing at the top of our file.

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);

#cssmenu {

background:#4cb6ea;

margin:0;

width:auto;

padding:0;

line-height:1;

display:block;

position:relative;

font-family:'PT Sans',sans-serif;

-webkit-box-sizing:content-box;

-moz-box-sizing:content-box;

box-sizing:content-box;

}

This next chunk of CSS will take care of the majority of our menu’s styles. I wont go over it all in detail, feel free to ask questions in the comments about any part that you don’t understand.

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

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

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

#cssmenu ul {

list-style:none;

margin:0;

padding:0;

display:block;

}

#cssmenu ul:after,

#cssmenu:after {

content:' ';

display:block;

font-size:0;

height:0;

clear:both;

visibility:hidden;

}

#cssmenu ul li {

margin:0;

padding:0;

display:block;

position:relative;

}

#cssmenu ul li a {

text-decoration:none;

display:block;

margin:0;

-webkit-transition:color.2sease;

-moz-transition:color.2sease;

-ms-transition:color.2sease;

-o-transition:color.2sease;

transition:color.2sease;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

}

#cssmenu ul li ul {

position:absolute;

left:-9999px;

top:auto;

}

#cssmenu ul li ul li {

max-height:0;

position:absolute;

-webkit-transition:max-height0.4sease-out;

-moz-transition:max-height0.4sease-out;

-ms-transition:max-height0.4sease-out;

-o-transition:max-height0.4sease-out;

transition:max-height0.4sease-out;

background:#ffffff;

}

#cssmenu ul li ul li.has-sub:after {

display:block;

position:absolute;

content:'';

height:10px;

width:10px;

border-radius:5px;

background:#000000;

z-index:1;

top:13px;

right:15px;

}

#cssmenu.align-right ul li ul li.has-sub:after {

right:auto;

left:15px;

}

#cssmenu ul li ul li.has-sub:before {

display:block;

position:absolute;

content:'';

height:0;

width:0;

border:3pxsolidtransparent;

border-left-color:#ffffff;

z-index:2;

top:15px;

right:15px;

}

#cssmenu.align-right ul li ul li.has-sub:before {

right:auto;

left:15px;

border-left-color:transparent;

border-right-color:#ffffff;

}

#cssmenu ul li ul li a {

font-size:14px;

font-weight:400;

text-transform:none;

color:#000000;

letter-spacing:0;

display:block;

width:170px;

padding:11px10px11px20px;

}

#cssmenu ul li ul li:hover > a,

#cssmenu ul li ul li.active > a {

color:#4cb6ea;

}

#cssmenu ul li ul li:hover:after,

#cssmenu ul li ul li.active:after {

background:#4cb6ea;

}

#cssmenu ul li ul li:hover > ul {

left:100%;

top:0;

}

#cssmenu ul li ul li:hover > ul > li {

max-height:72px;

position:relative;

}

#cssmenu > ul > li {

float:left;

}

#cssmenu.align-center > ul > li {

float:none;

display:inline-block;

}

#cssmenu.align-center > ul {

text-align:center;

}

#cssmenu.align-center ul ul {

text-align:left;

}

#cssmenu.align-right > ul {

float:right;

}

#cssmenu.align-right > ul > li:hover > ul {

left:auto;

right:0;

}

#cssmenu.align-right ul ul li:hover > ul {

right:100%;

left:auto;

}

#cssmenu.align-right ul ul li a {

text-align:right;

}

#cssmenu > ul > li:after {

content:'';

display:block;

position:absolute;

width:100%;

height:0;

top:0;

z-index:0;

background:#ffffff;

-webkit-transition:height.2s;

-moz-transition:height.2s;

-ms-transition:height.2s;

-o-transition:height.2s;

transition:height.2s;

}

#cssmenu > ul > li.has-sub > a {

padding-right:40px;

}

#cssmenu > ul > li.has-sub > a:after {

display:block;

content:'';

background:#ffffff;

height:12px;

width:12px;

position:absolute;

border-radius:13px;

right:14px;

top:16px;

}

#cssmenu > ul > li.has-sub > a:before {

display:block;

content:'';

border:4pxsolidtransparent;

border-top-color:#4cb6ea;

z-index:2;

height:0;

width:0;

position:absolute;

right:16px;

top:21px;

}

#cssmenu > ul > li > a {

color:#ffffff;

padding:15px20px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

font-size:14px;

z-index:2;

position:relative;

}

#cssmenu > ul > li:hover:after,

#cssmenu > ul > li.active:after {

height:100%;

}

#cssmenu > ul > li:hover > a,

#cssmenu > ul > li.active > a {

color:#000000;

}

#cssmenu > ul > li:hover > a:after,

#cssmenu > ul > li.active > a:after {

background:#000000;

}

#cssmenu > ul > li:hover > a:before,

#cssmenu > ul > li.active > a:before {

border-top-color:#ffffff;

}

#cssmenu > ul > li:hover > ul {

left:0;

}

#cssmenu > ul > li:hover > ul > li {

max-height:72px;

position:relative;

}

#cssmenu #menu-button {

display:none;

}

#cssmenu > ul > li > a {

display:block;

}

#cssmenu > ul > li {

width:auto;

}

#cssmenu > ul > li > ul {

width:170px;

display:block;

}

#cssmenu > ul > li > ul > li {

width:170px;

display:block;

}

If everything has been done correctly, your should have a completely functioning drop down menu. If your menu doesn’t look like the image below, go back and double check your CSS styles.

Now that we have your basic menu styles in place we need to create the CSS styles that will take effect for mobile devices. This is the responsive part of the tutorial. We will be using Media Queries to specify which styles kick in and at what screen width.

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

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

@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

#cssmenu > ul {

max-height:0;

overflow:hidden;

-webkit-transition:max-height0.35sease-out;

-moz-transition:max-height0.35sease-out;

-ms-transition:max-height0.35sease-out;

-o-transition:max-height0.35sease-out;

transition:max-height0.35sease-out;

}

#cssmenu > ul > li > ul {

width:100%;

display:block;

}

#cssmenu.align-right ul li a {

text-align:left;

}

#cssmenu > ul > li > ul > li {

width:100%;

display:block;

}

#cssmenu.align-right ul ul li a {

text-align:left;

}

#cssmenu > ul > li > ul > li > a {

width:100%;

display:block;

}

#cssmenu ul li ul li a {

width:100%;

}

#cssmenu.align-center > ul {

text-align:left;

}

#cssmenu.align-center > ul > li {

display:block;

}

#cssmenu > ul.open {

max-height:1000px;

border-top:1pxsolidrgba(110,110,110,0.25);

}

#cssmenu ul {

width:100%;

}

#cssmenu ul > li {

float:none;

width:100%;

}

#cssmenu ul li a {

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

width:100%;

padding:12px20px;

}

#cssmenu ul > li:after {

display:none;

}

#cssmenu ul li.has-sub > a:after,

#cssmenu ul li.has-sub > a:before,

#cssmenu ul li ul li.has-sub:after,

#cssmenu ul li ul li.has-sub:before {

display:none;

}

#cssmenu ul li ul,

#cssmenu ul li ul li ul,

#cssmenu ul li ul li:hover > ul,

#cssmenu.align-right ul li ul,

#cssmenu.align-right ul li ul li ul,

#cssmenu.align-right ul li ul li:hover > ul {

left:0;

position:relative;

right:auto;

}

#cssmenu ul li ul li,

#cssmenu ul li:hover > ul > li {

max-height:999px;

position:relative;

background:none;

}

#cssmenu ul li ul li a {

padding:8px20px8px35px;

color:#ffffff;

}

#cssmenu ul li ul ul li a {

padding:8px20px8px50px;

}

#cssmenu ul li ul li:hover > a {

color:#000000;

}

#cssmenu #menu-button {

display:block;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

width:100%;

padding:15px20px;

text-transform:uppercase;

font-weight:700;

font-size:14px;

letter-spacing:1px;

color:#ffffff;

cursor:pointer;

}

#cssmenu #menu-button:after {

display:block;

content:'';

position:absolute;

height:3px;

width:22px;

border-top:2pxsolid#ffffff;

border-bottom:2pxsolid#ffffff;

right:20px;

top:16px;

}

#cssmenu #menu-button:before {

display:block;

content:'';

position:absolute;

height:3px;

width:22px;

border-top:2pxsolid#ffffff;

right:20px;

top:26px;

}

}

We wont be able to see our responsive styles until we add a little bit of jQuery. So lets do that first before checking our menu.

Minimal jQuery

Next we will need to add the small amount of jQuery below to one of our themes script files. Almost all WordPress themes use jQuery these days so just find the file called script.js or possibly functions.js and paste the code in. Notice we are using the #cssmenu ID again to target our menu.

JavaScript

1

2

3

4

5

6

7

8

9

10

11

$(document).ready(function(){

$('#cssmenu').prepend('<div id="menu-button">Menu</div>');

$('#cssmenu #menu-button').on('click',function(){

varmenu=$(this).next('ul');

if(menu.hasClass('open')){

menu.removeClass('open');

}else{

menu.addClass('open');

}

});

});

Test it Out

Save all your files and go back to your browser. To test the responsive styles, resize your browser window to less than 800px. Your menu should look like the image below:

That’s it! If everything was done correctly you should have a functioning WordPress responsive drop down menu.

Troubleshooting

If your menu doesn’t seem to be function correctly, or it looks a little off then it is possible you are experiencing residual styling from your WordPress theme. This means that there are other CSS styles in your theme that are conflicting with our menu styles. The only way to fix this problem is to track down the other CSS styles and remove them. Your best bet is to use the Firebug extension for Firefox and inspect the CSS styles manually. Once you find the conflicting styles remove or delete them.

Thank you so much for this and for the corrections above. I am almost there I created a 3 line image, but not sure where to place in the css. I have a feeling I should place the image in the @media suggestions?

I am working on a localhost and the menu works great on full size, but it disappears when it goes to mobile.
I have placed the script.js in it’s own file and added to the header.php like so:

<script type="text/javascript" src="js/script.js”>

and I have also tried to (deleting the upper script) placed in the header.php file the script itself in between . I can’t get this menu to show up in the mobile size it just disappears. Can anyone help me with this? I really like this menu.

Great tutorial. Frankly speaking, I don’t know CSS much. But You’re easy to guide tutorial made it simple. I didn’t want to change my Theme but at the time I also wanted to get responsive menu. Thanks Russell

Great tutorial. Frankly speaking, I don’t know CSS much. But You’re easy to guide tutorial made it simple. I didn’t want to change my Theme but at the time I also wanted to get responsive menu. Thanks Russell

The login address for accessing the administrative panel of your modem is 192.168.1.1 admin. As every single networking company uses software-loaded modems that facilitates the access of admin features online, altering the settings has become easy now.

About DesignDisease

DesignDisease is a blog covering the myriads of topics related to the world of design. We provide inspirational posts as well as tutorials & articles. We also created some very popular WordPress themes that you can download for free.

Write For Us

We're always looking for great writers to contribute to our blog. Are you a web/graphic designer who loves writing? Are you looking to gain more exposure in the design community? Well, we want to hear from you!

Stay Up To Date

There are many ways you can subscribe to DesignDisease and read our content. You can subscribe to our RSS feed, follow us on Twitter or find us on Facebook. You can even receive new articles delivered by email if you wish.