public
Last active

A simple set of rulesets to add dropdown styling for WP menu structures.

  • Download Gist
WP-dropdown-style-dropin
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
/*
* A basic dropdown set of styles for WP wp_nav_menu() / wp_pages_list()
* This dropin group of rulesets uses a top level selector nav#site-main which needs to be changed to suit or added to markup.
* There is a simple series of CSS Transitions to provide a little smoothness to the opening / closing of the menu and opacity * transitioned on the li elements.
* There are background colours added and obviously these are subjective and won't suit all themes so need changing
* There is a comlimentary JS snippet that just adds classes to hovered li elements and their parents, this is named in time * honoured manner as 'sfhover' it's real purpose used to be to provide support for IE but are also useful to provide xpath * navigation back up the li nodes and used here to add li backgrounds on all hovered elements parents. In addition the script * Adds a class 'has-child' to li elements having nested ul li children.
*/
 
/* Configure main menu dropdowns */
nav#site-main ul li {
position: relative;
}
nav#site-main ul li li {
margin-right: 0;
}
nav#site-main ul ul {
-moz-box-shadow: 0 0 3px #999;
-webkit-box-shadow: 0 0 3px #999;
box-shadow: 0 0 3px #999;
border: 1px solid #969696;
position: absolute;
top: 0;
margin-top: 1.5em;
opacity: 0;
transition: visibility 1s ease-in-out 0s, opacity 0.6s ease-in-out 0.5s;
visibility: hidden;
}
nav#site-main ul ul li {
background: #D1D4DC;
display: block;
padding: .2em .8em .2em .2em;
opacity: .8;
white-space: nowrap;
width: auto;
transition: opacity 1s ease-in-out 0s;
}
nav#site-main ul ul ul {
left: 98%;
top: 4px;
margin: 0;
padding-top: 0;
}
nav#site-main ul li:focus > ul,
nav#site-main ul li:hover > ul {
opacity: 1;
visibility: visible;
}
nav#site-main ul ul li:focus,
nav#site-main ul ul li:hover,
nav#site-main ul ul .sfhover,
nav#site-main ul ul .sfhover li {
background: #AEB6C8;
opacity: 1;
}
 
/************************************/
 
/*
* This section is the simple jQuery snippets that add classes, they would need to be added to a file and enqueued or added to * the WP footer via wp_foot().
* These snippets are not critical to the functioning of the dropdowns but mustn't be added to a stylesheet file.
*/
jQuery(document).ready( function($) {
 
$("#site-main ul li").mouseover( function() {
$(this).addClass('sfhover');
});
 
$("#site-main ul li").mouseout( function() {
$(this).removeClass('sfhover');
});
 
$('#site-main ul li ul li').parents('li').addClass('has-child');
 
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.