-
1 Attachment(s)
JS Hamburger Menu (Acorn)
This question stems from Acorn's suggestion on this thread - https://www.talkgraphics.com/showthr...641#post626641
I (kind of) got my head around what does what and why, in the same way a five year old can read A is for Apple. My question relates to the hover effect on the MouseOver layer.
I made a rectangle and gave it the link javascript: open(''); so that it would close the menu. However, if I place it so the edge is central, or further, over the menu itself, it triggers the MouseOver effect. Why is that?
Another, less important query. I'd like to look at different animations for the menu, changing SlideDown to SlideUp for instance. I did search for CSS animation but didn't get anywhere. My lack of knowing what to search for is the problem.
Attached: Xara .web to explain the ramblings above.
Attachment 127477
-
Re: JS Hamburger Menu (Acorn)
Chris, thank you for having a go.
For the "reveal", I went for the simpler animations,: show,SlideDown & SlideUp, pickig slideDown.
I set the reveal to slow and the hide to fast on purpose as it is then simpler to explain how numerical delays can be input instead; remove the quoted text so it have instant, add a number of milliSeconds to define an exact delay, or even set up a function that can be specific to any trigger event.
You will get a MouseOver event when two elements with Links have an overlap of more than half. This is a default as to how the MouseOver layer is activated.
Instead of cloning the Text Area to the MouseOver layer, you can use Website link colours > Mouse Over instead.
A messier solution would be to slice out four grey rectangles; the one under the menu items would not have a close (open('')) link so would not then trigger the MouseOver rollover effect.
Your grey box approach is not part of a typical menu design but I did say you can design and use anything!
CSS Animations can be applied. You need to add a ClassName to an item. In Website > HTML Code (head), there would be a CSS statement for that ClassName and a pseudo element :hover. It get complicated as jQuery also has its own approach to triggers and animations. That is why I tried to abstract most away and keep the coding very simple to start off.
Acorn
-
Re: JS Hamburger Menu (Acorn)
The part about how MouseOver is activated is something i never thought about before and therefore had no clue.
The grey box was a theory I had to make it the same colour as the background and give it a transparency of 95%, then, just clicking away from the menu would close it. I find this is my first reaction when wanting to close a menu, i expect interacting with anything that isn't the menu will close it. I didn't put much thought into it, just doing stuff to see if any spark of creativity jumps forth.
I actually did try changing slideDown to slideUp but nothing happened, I'll have a better look.
Thank you for your input, as always.
-
Re: JS Hamburger Menu (Acorn)
Using jquery effects as search criteria found tons of stuff I don't understand and will frustrate me as i try to play with them.
-
1 Attachment(s)
Re: JS Hamburger Menu (Acorn)
You've created a menu monster, Acorn. I can't stop now I've started!
Next step is to find and fiddle with different effects. Once the idea slipped into place it was easy to keep adding submenus that either replace or add onto the existing menu.
There's a couple >HERE< to look at, and the .web file is attached below should anyone want to poke around in the engine.
> Attachment 127478 <
-
1 Attachment(s)
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Chris M
You've created a menu monster, Acorn. I can't stop now I've started!
Next step is to find and fiddle with different effects. Once the idea slipped into place it was easy to keep adding submenus that either replace or add onto the existing menu.
There's a couple
>HERE< to look at, and the .web file is attached below should anyone want to poke around in the engine.
>
Attachment 127478 <
I am sorry Chris, I lied! It is more than a menu maker. It adds a large variety of animations to a site.
It can be an accordion of Tabbed text.
It can be a cascade of instructions.
It can be a recipe ingredient list with tick-off options.
It does force you to plan what calls what, but as you have discovered, that's the fun part.
:pointAttachment 127479
Acorn
-
Re: JS Hamburger Menu (Acorn)
It's late on Sunday night. I have a busy week ahead. I'm not going to click that bouncy finger pointing at...damn it, I clicked it.
-
1 Attachment(s)
Re: JS Hamburger Menu (Acorn)
Luckily I'm off to bed so I won't be able to continue this game...or will I?
>Attachment 127480<
-
Re: JS Hamburger Menu (Acorn)
@chris m. I’m going to bookmark that Chris. Thanks for your hard work.
-W
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
bwood
@chris m. I’m going to bookmark that Chris. Thanks for your hard work.
-W
Bill, I could swear I am the protagonist in this creation.
Acorn
-
Re: JS Hamburger Menu (Acorn)
Enthusiasm slipped to frustration then spiralled into despair. I tried to make an object slide out from the right using this page as reference LINK
It's a lack of understanding what bit does what on my part. As an example, this bit of the code is in the Head section, and looks like it's the bit that makes it do the slidey part. But how and where does one glue that into Xara? I understand the '.box' is a reference to the part of the code that created the box.
<script>
$(document).ready(function(){
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
});
</script>
Don't be scared to say Here Lies Dragons. If this looks to be too far above my understanding I'll gladly move on. It's only something that's caught my attention, not something I need for a job.
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Chris M
Enthusiasm slipped to frustration then spiralled into despair. I tried to make an object slide out from the right using this page as reference
LINK
It's a lack of understanding what bit does what on my part. As an example, this bit of the code is in the Head section, and looks like it's the bit that makes it do the slidey part. But how and where does one glue that into Xara? I understand the '.box' is a reference to the part of the code that created the box.
<script>
$(document).ready(function(){
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
});
</script>
Don't be scared to say Here Lies Dragons. If this looks to be too far above my understanding I'll gladly move on. It's only something that's caught my attention, not something I need for a job.
Nothing to see here.
Let's deconstruct.
You add code directly into the Xara link box.
It will be javascript: void $('#box').({width: toggle});
toggle may not be the right option.
You may have to give your box width an actual px dimension.
I used a Name of box, which is invoked as #box.
I am absent from any machine from an unexpected happening for a couple of days.
Acorn
-
2 Attachment(s)
Re: JS Hamburger Menu (Acorn)
Excuse the typos, the code will be javascript: void $('.yellow').animate({"width": "toggle"});
To show how messy it can be in fitting it all into the Link box here is an accordion approach.
To see your slideLeft action, you need to collapse all the other text blocks.
:pointAttachment 127518.
This why I "invented" the Ultimate Menu...
I abstracted the code into one place.
Clearly, I need to add the ability to morph all this capability into my code so it is easier to tweak.
It will take a more than a day.
Acorn
-
1 Attachment(s)
Re: JS Hamburger Menu (Acorn)
Plenty of time to play with this project - part of a social media campaign that's due to kick in when the Gold Coast nightclubs fully reopen.
Using Acorn's 'Accordions' (above):
Apart from editing the names and changing part of the javascript from 'hide' to 'slideUp' I've left everything as is. My problem is when I first click either javascript link, they do the slideUp bit, but not the slideToggle bit. Clicking again makes everything work as expected, it's just the initial click.
< Attachment 127520 >
The tag is 'When 2 Clubs Share A Door'. I'm aware that 'When 2 Vibes Share A Door' is the better pun, but the word vibe doesn't have the right...well...vibe.
-
1 Attachment(s)
Re: JS Hamburger Menu (Acorn)
Hi guys,
I have really enjoyed playing with design freedom that JS offers :) Being trying to get things like I want them for more than 2 days - it's been a case of 1 step forward and 2 steps back....
I'm at the stage where I'm pretty happy with the way things work - but I cannot get COURSE LOG IN and APP LOG IN to work as links to other web addresses - I've used www.xara.com as an example. When I click on either of these buttons the menu just closes and I cannot for the life of me find the script/command that's making that happen.
Not sure what I'm going to do about the menus sitting over the text though.... I'm starting to think about a horizontal menu bar...... :)
Many thanks,
LGF
Attachment 127521
PS: The page is really a mess with the 1 menu showing on top of the other - could I put 1 menu on a separate layer and "call up" that layer when the menu button is selected?
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Acorn
Excuse the typos, the code will be
javascript: void $('.yellow').animate({"width": "toggle"});
To show how messy it can be in fitting it all into the Link box here is an accordion approach.
To see your slideLeft action, you need to collapse all the other text blocks.
:point
Attachment 127518.
This why I "invented" the Ultimate Menu...
I abstracted the code into one place.
Clearly, I need to add the ability to morph all this capability into my code so it is easier to tweak.
It will take a more than a day.
Acorn
I like the concept ! How would I change the code so that all you saw were the tabs when the site first opens, as opposed to having the "content" of the yellow tab show as at present?
LGF
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
letsgofishing
I like the concept ! How would I change the code so that all you saw were the tabs when the site first opens, as opposed to having the "content" of the yellow tab show as at present?
LGF
You're only seeing the yellow because it's the top layer. Make it transparent and you see the green underneath. In other words, all the layers begin as visible and don't disappear (hide) until you click one of the javascript links.
-
Re: JS Hamburger Menu (Acorn)
Just add:
Code:
<script>
$('.yellow, .red, .green, .blue').hide();
</script>
to Website Body (code).
Acorn
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Chris M
You're only seeing the yellow because it's the top layer. Make it transparent and you see the green underneath. In other words, all the layers begin as visible and don't disappear (hide) until you click one of the javascript links.
OK - I understand. SO there is no way to make just the coloured tabs visible initially?
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Acorn
Just add:
Code:
<script>
$('.yellow, .red, .green, .blue').hide();
</script>
to Website Body (code).
Acorn
Ooh, I feel pretty pleased with myself. I was wandering down the same path, but couldn't put the ,.>$)( in their correct pigeon holes. What does the $ mean/do?
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Chris M
Ooh, I feel pretty pleased with myself. I was wandering down the same path, but couldn't put the ,.>$)( in their correct pigeon holes. What does the $ mean/do?
The $ is an alias for jQuery.
$('.yellow, .red, .green, .blue').hide(); is the dialog for find everything that has a ClassName of yellow, red, green or blue and then hide them.
Acorn
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Acorn
Just add:
Code:
<script>
$('.yellow, .red, .green, .blue').hide();
</script>
to Website Body (code).
Acorn
Many thanks again Acorn - really enjoying learning about what JS can do.
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
letsgofishing
Hi guys,
I have really enjoyed playing with design freedom that JS offers :) Being trying to get things like I want them for more than 2 days - it's been a case of 1 step forward and 2 steps back....
I'm at the stage where I'm pretty happy with the way things work - but I cannot get COURSE LOG IN and APP LOG IN to work as links to other web addresses - I've used
www.xara.com as an example. When I click on either of these buttons the menu just closes and I cannot for the life of me find the script/command that's making that happen.
Not sure what I'm going to do about the menus sitting over the text though.... I'm starting to think about a horizontal menu bar...... :)
Many thanks,
LGF
Attachment 127521
PS: The page is really a mess with the 1 menu showing on top of the other - could I put 1 menu on a separate layer and "call up" that layer when the menu button is selected?
Acorn could you or Chris or someone possibly help?
-
2 Attachment(s)
Re: JS Hamburger Menu (Acorn)
I can't tell you why, but if you change the Xara.com link to 'Not Specified' or '_Self' it works. I would guess the javascript is stopping the link opening a new tab. But like guessing that the panels need to start hidden, I may be right, but have no idea how to make it happen.
On a side note: your soft groups are not in a nice stack. Piling the contents of each group above each other makes the whole thing neater and easier to work with.
Attachment 127525 Attachment 127526
-
1 Attachment(s)
Re: JS Hamburger Menu (Acorn)
You mention thinking about a horizontal bar, that's the way I would go too.
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
letsgofishing
Acorn could you or Chris or someone possibly help?
LGF, the somebody to help you has to be Xara!
In all versions prior to Xara Pro+v17, I can use the same construct as Xara; Link to: http://xara.com; Open link: New window, and everything works as expected. Not in Pro+.
UPDATE
The code in the Website Body (code) and the subsequent function calls need to change the function from open() to something else; I have just used openSesame(chain) and all works as it should.
Acorn
-
1 Attachment(s)
Re: JS Hamburger Menu (Acorn)
Don't forget to add the 'Sesame' to your links as well.
Attachment 127541
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Chris M
As in "the subsequent function calls", agreed.
Cheers,
Acorn
-
1 Attachment(s)
Re: JS Hamburger Menu (Acorn)
Pretty comfortable with the theory now, although I don't claim to know 70% of the actual code.
I can dive in and change the speed of animation, toggle and slide, slideUp, hide and fade, but that's about it.
Link to my efforts < HERE > along with Acorn's code that makes it work.
And the .web for anyone who wants edit/add/expand the page.
Attachment 127542
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Chris M
Link to my efforts <
HERE > along with Acorn's code that makes it work.
Chris, thanks. Made my day.
Acorn
-
7 Attachment(s)
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Chris M
Pretty comfortable with the theory now, although I don't claim to know 70% of the actual code.
I can dive in and change the speed of animation, toggle and slide, slideUp, hide and fade, but that's about it.
Link to my efforts <
HERE > along with Acorn's code that makes it work.
And the .web for anyone who wants edit/add/expand the page.
Attachment 127542
Thanks for sharing Chris. I had a play with your example and added a 'take-me-home' button (edition attached)
Attachment 127545
Next, I thought let's combine Acorn's ideas with the animated popup concept to extend animation through standard Xara. In the example, the link brings the selected class into view and opens a popup at the same time in a step-by-step approach.
Attachment 127547 Example attached
Then going back in the thread to the @LGF challenge and a simple NavBar, I made one with no code at all with a standard go to Top-of-Page button, where the menu is revealed by sliding in from the top. The login's are sticky so always in view whereas the additional buttons slide upwards out of view, but are brought back with the Top of Page button.
Attachment 127549 Example attached.
Thanks to you and Acorn for the ideas.
Gary
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Initiostar
Thanks for sharing Chris. I had a play with your example and added a 'take-me-home' button (edition attached)
Attachment 127545
Next, I thought let's combine Acorn's ideas with the animated popup concept to extend animation through standard Xara. In the example, the link brings the selected class into view and opens a popup at the same time in a step-by-step approach.
Attachment 127547 Example attached
Then going back in the thread to the @LGF challenge and a simple NavBar, I made one with no code at all with a standard go to Top-of-Page button, where the menu is revealed by sliding in from the top. The login's are sticky so always in view whereas the additional buttons slide upwards out of view, but are brought back with the Top of Page button.
Attachment 127549 Example attached.
Thanks to you and Acorn for the ideas.
Gary
Gary, thank you for taking these further down the line.
We probably need siran to convert javascript: void $('.cover, .step1, .step2, .step3, .step4 ').hide(0);xr_ppc("xr_xp4");xr_ppc("xr_xp5");xr_cp u(6); into a Domain Specific Language construct (akin to Xara's popup syntax).
P.S. The javascript: void $('.cover, .step1, .step2, .step3 .step4 '); part you had in earlier Steps does nothing. It need an action to perform over that collection like the hide(0) here.
In the Toggle.xar file, I added WebAmination > Click: Rotate-fade + Fast to the controls. Very satisfying.
Acorn
-
1 Attachment(s)
Re: JS Hamburger Menu (Acorn)
Quote:
Gary, thank you for taking these further down the line.
We probably need siran to convert javascript: void $('.cover, .step1, .step2, .step3, .step4 ').hide(0);xr_ppc("xr_xp4");xr_ppc("xr_xp5");xr_cp u(6); into a Domain Specific Language construct (akin to Xara's popup syntax).
P.S. The javascript: void $('.cover, .step1, .step2, .step3 .step4 '); part you had in earlier Steps does nothing. It need an action to perform over that collection like the hide(0) here.
In the Toggle.xar file, I added Web Animation > Click: Rotate-fade + Fast to the controls. Very satisfying.
Acorn
Thanks for your advice Acorn. I removed the redundant code; all continued to work OK.
I added your suggestion to Chris's Toggle - slick effect.
Gary
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Acorn
LGF, the somebody to help you has to be Xara!
In all versions prior to Xara Pro+v17, I can use the same construct as
Xara; Link to: http://xara.com; Open link: New window, and everything works as expected. Not in Pro+.
UPDATE
The code in the Website Body (code) and the subsequent function calls need to change the function from open() to something else; I have just used
openSesame(chain) and all works as it should.
Acorn
Thank you Acorn - Xara is remarkably weird some times!!!!
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Chris M
Thanks Chris M and Acorn
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Chris M
You mention thinking about a horizontal bar, that's the way I would go too.
Nice one Chris!
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Acorn
LGF, the somebody to help you has to be Xara!
In all versions prior to Xara Pro+v17, I can use the same construct as
Xara; Link to: http://xara.com; Open link: New window, and everything works as expected. Not in Pro+.
UPDATE
The code in the Website Body (code) and the subsequent function calls need to change the function from open() to something else; I have just used
openSesame(chain) and all works as it should.
Acorn
Aaaaarrrrgggghhhh!!! Now when I click on RESOURCES I get a - Not Found - The requested URL has no content.
-
Re: JS Hamburger Menu (Acorn)
OK - I have to add the sesame bit if I want the drop down menu to open - like I said - 1 forwards, 1 back...
SO does this mean that in the future, when ever I want the JS to open something, I have to add another word like this: javascript: openUp(whatever);
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
letsgofishing
Aaaaarrrrgggghhhh!!! Now when I click on RESOURCES I get a - Not Found - The requested URL has no content.
LGF, let's assume it's finger trouble.
My last change puts the Link as javascript: openSesame('.Ham4');
If not fingers, can you upload your file?
Acorn
-
Re: JS Hamburger Menu (Acorn)
Quote:
Originally Posted by
Initiostar
Thanks for sharing Chris. I had a play with your example and added a 'take-me-home' button (edition attached)
Attachment 127545
Next, I thought let's combine Acorn's ideas with the animated popup concept to extend animation through standard Xara. In the example, the link brings the selected class into view and opens a popup at the same time in a step-by-step approach.
Attachment 127547 Example attached
Then going back in the thread to the @LGF challenge and a simple NavBar, I made one with no code at all with a standard go to Top-of-Page button, where the menu is revealed by sliding in from the top. The login's are sticky so always in view whereas the additional buttons slide upwards out of view, but are brought back with the Top of Page button.
Attachment 127549 Example attached.
Thanks to you and Acorn for the ideas.
Gary
Hi Initiostar - thanks for all the thinking and other ideas - appreciated!