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?