[Pro] Responsive CCS Menu submenu reveal

Freeway
1

Forgive my total ignorance. I came across a thread with an example of a site using CCS Menu. The menu at "hamburger size " shows the main menu headings - and to my amazement shows the submenu on hover.
All my sites to date done in FW don’t do this - my link here is just one example (Viscounts Restaurant) - I thought this was how the menu should show - i.e.: the Main menu item and the sub menu under (in a different) colour. but all showing one under the other.
This is the site that made me question - What on earth have I missed?

http://94.136.40.103/~cheaper-school-prospectus.co.uk/wgsp/index.php

http://www.viscountsrestaurant.co.uk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

2

You would see the Hamburger sub 480 px on yours but the #Pagewrapper is set at approx 1200px at that BP - hence the hamburger is off page to the right.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

3

Thanks for taking a look Dave. I will have a look in the morning.

T

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

4

OK I Understand about the Pagewrapper width. I have posted a single page test here:

http://www.trevormckay.co.uk/Machinery/index.php

No Pink areas showing on FW preview. At the smaller breakpoints - the menu item “Machinery Stock” has a number of sub menu items. On the standard desktop screen mode the sub menu items appear as normal but at hamburger size the submenu items are all viewing under the Main Menu heading whereas in this example

http://94.136.40.103/~cheaper-school-prospectus.co.uk/wgsp/index.php

(at hamburger size) has the submenu items hidden and these are revealed when the main menu item is touched/clicked. This is what I am trying to achieve.

Trev

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

5

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:
https://freewaytalk.softpress.com/person/options

6

Ah - Good I thought all my menus were wrong.- but it is a very tidy feature as it cuts down on a lot of wording visible!

Is this the code from that site or your own (colours different I believe) and, is it possible or allowable use the feature - if so where is the code placed?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

7

Is this the code from that site

Copied from index_responsive-menu.css on that site - a separate CSS file.

But you would have to rewrite your own CSS menu to incorporate it.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

8

Ah - OK I understand - would be a nice inclusion in the FW CCS Menu.

Thank you for time to look into this for me. Dave

T

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

9

Hi DD

I’d love to be able to implement this function in my menu, the existing CSS Menu action is frustrating in it’s treatment of responsive hamburger sub menus, but after hours of pouring over the code I just can’t figure out where to start in getting this to work! Any pointers to get me started would be gratefully received.

Thanks
Dave

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

10

On 19 Apr 2016, 8:48 am, Dave Dunning wrote:

Hi DD

I’d love to be able to implement this function in my menu, the existing CSS Menu action is frustrating in it’s treatment of responsive hamburger sub menus, but after hours of pouring over the code I just can’t figure out where to start in getting this to work! Any pointers to get me started would be gratefully received.

Thanks
Dave

Hi DD stand down on this one as I’ve worked out a similar solution based an example of Richard’s I found on here.

Thanks
Dave

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options