The example at cheaper-school is not a standard FW CSS menu. One look at the CSS tells me that
.responsive-menu {
overflow: visible !important;
height: 1%;
text-align: left;
}
.responsive-menu, .responsive-menu * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.responsive-menu, .responsive-menu ul, .responsive-menu dl {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 0;
}
.responsive-menu, .responsive-menu li, .responsive-menu dt, .responsive-menu dd {
position: relative;
padding: 0;
margin: 0;
}
.responsive-menu li > ul, .responsive-menu dt > dl, .responsive-menu dd > dl{
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
text-align: left;
white-space: nowrap;
}
.responsive-menu li:hover > ul, .responsive-menu dt:hover > dl, .responsive-menu dd:hover > dl{
display: block;
}
.responsive-menu > li, .responsive-menu > dt, .responsive-menu > dd {
display: inline-block;
}
.responsive-menu li a {
display: block;
text-decoration: none;
}
.responsive-menu > li a {
padding: 20px 30px 20px 30px;
border-top: 0px transparent solid;
border-right: 1px #CCCCCC solid;
border-bottom: 0px transparent solid;
border-left: 0px transparent solid;
text-decoration: underline;
color: #FFFFFF;
font-size: 14px;
background: #48C2FC ;
}
.responsive-menu > li a:hover {
color: #333333;
background: #90D248 ;
}
.responsive-menu > li ul a {
padding: 10px;
border-top: 0px transparent solid;
border-right: 1px #000000 solid;
border-bottom: 1px #000000 solid;
border-left: 1px #000000 solid;
text-decoration: none;
color: #333333;
font-size: 12px;
background: #FFFFFF ;
}
.responsive-menu > li ul a:hover {
color: #FFFFFF;
background: #808080 ;
}
.rcm-disclosure {
background-image: url(http://cdn.freewaypro.com/responsive_css_menu/0.1/hamburger-white.png);
background-repeat: no-repeat;
background-position: center center;
width: 45px;
height: 45px;
right: 0;
line-height: 0px;
font-size: 0px;
display: none;
position: relative;
top: 0;
z-index: 10;
overflow: hidden;
background-size: 80%;
}
.rcm-page-name {
display: none;
}
@media only screen and (max-width: 940px){
.rcm-page-name {
display: block;
position: absolute;
left: 0;
top:.5em;
color: #FFFFFF;
font-size: 14px;
}
.rcm-page-name {
font-size: 120%;
padding: 0 1em;
}
nav {
min-height: 45px;
}
.responsive-menu {
display: none;
min-height: 45px;
}
.responsive-menu > li {
width: 100%;
}
.responsive-menu li ul {
position: relative;
top: auto;
left: auto;
}
.rcm-disclosure {
display: block;
float: right;
}
.rcm-disclosure.show + .responsive-menu {
display: block;
}
}
So the answer is: You haven’t missed anything as this is not an out of the box FW CSS Menu.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at: