Can I make my css menu like this?

Freeway
21

I’m guessing that menu is pre-determined. I’m try to use a WY Menu for client editing. Responsive behavior for a hamburger us not supported yet in Web Yep. My issue is that My menu will open on mobile?touch devices but it won’t close. Trying to figure out an onclick way of closing the menu.
I used just CSS for a slide out.

http://www.smartytest.com/KNelson

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:

22

My menu will open on mobile?touch devices but it won’t close.

I cant even see your Menu on my iPhone 6S

There is a thin grey shadow down the left side of my screen but nothing that indicates a menu.

D

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

23

On 10 Feb 2016, 10:41 pm, billy kimmel wrote:

I’m guessing that menu is pre-determined. I’m try to use a WY Menu for client editing. Responsive behavior for a hamburger us not supported yet in Web Yep. My issue is that My menu will open on mobile?touch devices but it won’t close. Trying to figure out an onclick way of closing the menu.
I used just CSS for a slide out.

http://www.smartytest.com/KNelson

Billy

Not sure what you mean by pre-determined. The site in the link has one menu for desktop screens and another for smaller/mobile screens featuring the drop down menu and hamburger (which is just constructed from html boxes not CSS) using Walters original code and instructions from the start of this thread. I followed those instructions and it worked a first time giving me a slide out menu that opened and closed I all devices. However as you’ll notice there’s JavaScript as well as CSS involved.

I suggest you follow Walters tutorial and you’ll end up with with something similar to what you have now but with a menu that closes, although you’ll have to create the hamburger and styling yourself.

Dave

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

24

try it again. I was editing

freewaytalk mailing list
email@hidden
Update your subscriptions at:

25

I find that tutorial hard to follow. If I had it in Freeway example file I could figure it out in minutes.

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:

26

On 5 Jan 2016, 11:45 pm, waltd wrote:

I did something quite similar on the Inlay documentation site: http://docs.inlay.io If you look at the stylesheet (all made in Freeway, for a change!) http://docs.inlay.io/css/sheet1.css you can see a class style named .shy. It applies a translateX transform to the menu when it’s applied to the menu. The animation effect is just from the transition:all part of that rule, which makes this move take 400ms to complete. Further down the list, the .sidebar style gives the menu the semi-transparent background (the rgba color definition had to be made in the Extended interface).

The JavaScript was added to the page with Protaculous2, and consisted entirely of this:

$('navigation').observe('mouseenter', function(evt){
  this.toggleClassName('shy');
}).observe('mouseleave', function(evt){
  this.toggleClassName('shy');
}).observe('touchend', function(evt){
  this.toggleClassName('shy');
});

In my example, the sidebar was drawn on the page in the location where it was going to appear, set to Position Fixed, height to 100%, and the width was adjusted along with the .shy class translateX amount so it would collapse down to the bar. Then I used the Item/Extended dialog to add the classnames sidebar and shy to the navigation bar. In Freeway, it looked as it would open, and when the page loads, it is in the hidden mode, and when you mouse over it (or touch it in iOS), it opens up until you click something or mouse away.

Walter

On Jan 5, 2016, at 9:40 AM, grantsymon wrote:

I posted this link a few days ago in the Exhibeo section, but I’m wondering if there is any way that I can get my current implementation of css menu (made with the css menus action) to do this sliding/hiding thing … and also have the transparency?

http://demo-7.photodeck.com/-/galleries/portfolio-style

On 10 Feb 2016, 11:12 pm, billy kimmel wrote:

I find that tutorial hard to follow. If I had it in Freeway example file I could figure it out in minutes.

Billy

I’m no expert but I got all I needed from Walters original post including the demo in the link he provided. Just a matter of adding the JavaScript and CSS markup to your page and adding the extended classes to the divs making up the menu.

D

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

27

If I get a chance tomorrow , fighting with accordion menus, I’ll make up an example in Freeway and send you a download link.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

28

That would be wonderful.
Very considerate. Thank you.

Not sure where the java goes. , ??
Protaculous, Dom Observer or custom?

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:

29

I added it straight into the page markup in before along with the CSS, worked fine.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

30

So you didn’t use Protaculous Action? You just put it all in the head?
Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:

31

Yep but Protaculous will do the job too

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

32

ok
thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:

33

Yeah, if you can send me an example I think all will be fine. There is something I’m missing.

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:

34

Remember, if you do use Protaculous, it will add the outer wrapper code for you, so you can leave this part off entirely (script tag and first and last lines of actual code):

<script type="text/javascript">
document.observe('dom:loaded', function(){


});
</script>

The Action always writes that part for you. You only have to enter the actual “guts” of the code. The outermost function is there to make sure that all of the page elements have finished downloading before the script fires, and the script tag is there to explain to the browser that the context has changed and it needs to pay extra attention.

Walter

On Feb 10, 2016, at 6:46 PM, Dave Dunning email@hidden wrote:

Yep but Protaculous will do the job too

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

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

35

Dave,
If you get a chance today please sent me that example. I’ve tried this and I’m missing something. I see the background color of the sidebar showing up but the translateX function is not happening.

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:

36

Sorry been a bit hectic this morning! OK I’ll have some lunch and put together an example. In the meantime have you made sure that the name/ID of the sidebar is the same as the name/ID in the script you’ve added to the markup?

Also have you added the classes ‘shy’ and ‘sidebar’ (without quote marks) in the extended for your sidebar div?

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

37

Yes. I have.
Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:

38

I think you’re missing a line of code. Here’s the link to a very basic template, just copy the code from and and adjust to suit.

https://dl.dropboxusercontent.com/u/595516/Sidebar%20For%20Billy.zip

Let me know how you get on.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

39

Ok so that worked. A few things that were happening.
First the javascript needed to be in the not in the
Also I had no src link for the prototype.js. That wasn’t provided in Walters example. Pretty important.

On last question can I adjust the width of my sidebar that is seen on hover?

Thank you so much for your help on this. Unfortunately with me I have to sometimes be spoonfed these things. I’m not a coder so it didn’t occur to me that I needed a src to more script. It makes sense, but there you are.

Thanks again,

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:

40

No probs and yes sorry about forgetting the link to prototype.js! the javascript can go in either markup locations, it’s just a bit more efficient in .

Yes you can have the width anything you like you just have to remember to adjust the X measurement to allow for the always visible strip. If you’re sidebar is 400px wide and you want to have 60px visible then adjust X to -340px.

No probs re the help, I’m not a coder either but with the advise of Walter, Delta Dave and the crew here I’ve managed to advance quite a bit recently, so keep on chipping away.

Cheers
Dave

freewaytalk mailing list
email@hidden
Update your subscriptions at: