I’ve been watching the getting started videos (which are fantastic by the way!) and I’m trying to figure out the best way to create a dropdown menu.
I’m thinking I could create a symbol (called ‘dropdown menu’) and jump to specific parts on it’s timeline using triggers to simulate it expanding, collapsing and selecting items.
However, I’m not sure if this is the best approach as I’m not familiar with Hype. Would love some advice - or even a video on the topic.
A symbol is probably the best approach; you can encapsulate all the behavior and then use it across different scenes. Others might be able to chime in with examples!
Here is my first attempt at a drop down menu.
http://www.brockmanfamilyfarming.com/newsite/testpage-hypedro.html
The navigation type was done in Hype and inserted into a page that already included the masthead. Am not sure from your post whether you will (like me) be inserting Hype generated dropdowns into a website created with other software or whether you are creating a Hype-created website.
In Hype 3 I was able to get the styling that I needed. My key problem is the type looks really low res: like it is an image rather than like it is CSS styled HTML. Would love Jonathan or another commenter to suggest a fix and/or instruct me on how to get the resolution to be retina level for retina displays. Will make a separate post on this if there is no reply here.
As to how I did it, the dropdowns were done in a single scene with timeline actions using content generated within Hype. The trickiest part was to get dropdown A to disappear when dropdown B appears, and vice versa. For that functionality I think you need to build a file for each page that includes all the nav columns that appear on that page.
I haven’t yet figured out whether symbols would help me out. I suspect I will need a tailored Hype file for each page in my non-Hype created site because I don’t think you can export different scenes for different destinations, as you might with Illustrator or Photoshop by selecting different layers for different exports. Also, in the most consistent page-to-page dropdown (Site Pages) I would like to visually indicate the page you are on by styling that page name differently in the dropdown and not including a link. So in my situation I suspect symbols would only work if 1) They extend across multiple Hype files 2) A single component that is different in each instance of use for page navigation cab be made to vary from symbol instance to symbol instance.
Don't know what I did, but the type is now nice and sharp! So the issue I raised above went away.
However, a new issue came to light when I posted my Hype solution in a forum of others using the same website design software I've been using.
Yes, you got the look you want but at the expense of a semantically meaningful menu. I realize it may be pointless to even bring this up but I will any way.
Menus are important semantic structures for search engines and assistive devices, and what you’ve done with Hype looks fine but it falls over flat on its face when it comes to semantics (there’s no logical semantic flow to it) and accessibility: turn of js and poof … where’s the menu?
I have done something similar but with a couple of variations.
As my site has a vertically scrolling home page, I want to encourage my visitors to scroll through the sections on the home page to view the main “foot-stompers” before going anywhere else. What I did was create several timelines:
One makes a burger menu fade in. This is triggered by an action in the main timeline that is set at 8 seconds. It gives the visitor enough time to discover the vertically arranged sections instead of automatically going for the menu. (Each section has a “learn more” button for cycling through one or more pages and back to the same location on the home page.) When the visitor reaches the bottom of the page and they hit a button to scroll to the top, the menu is there waiting for them.
There is another timeline that extends / retracts the menu along with an invisible object. When the menu is extended the invisible object pops over the burger and retracts menu when clicked (a down-and-dirty toggle).
Then, rrather than using a menu item for simply jumping to a page, I have designed things so that the menu retracts before the jump.
To do this I created a simple timeline for each individual menu item. Each one has a timeline action that, after allowing time for the menu to retract, triggers the jump to the URL for than menu item.
When clicking on the menu item, this triggers the menu retraction, plus it plays the timeline for that menu item, which triggers the jump to the associated URL.
For a site created in Hype (which mine is) you may wish to speed up initial loading by splitting the site into multiple Hype docs. If the site were not media heavy I would use a similar approach for jumping between scenes.
I am new to hype. What is the best way to create a drop down menu. Can you tell me step by step how you did yours?
Hi and welcome
I can suggest two ways
Use this template with a script to add the scene name in a drop menu.
http://www.hypedocks.com/downloads/automenu-builder/
Try this template with some drop navigations ( made with hype only)
http://www.hypedocks.com/downloads/drop-navigation-kit/
I have been trying to apply the drop-navigation sample template you provided, to my site.
I cannot figure out how to hide the drop down items on my site on the main timeline and have them show on the hover timeline. There are no opacity settings on the main timeline for the drop down menu. Is there a video tutorial in English that has clear graphics?
You’ve long since figured this out, but here’s a version for those who haven’t.
Create a stack of buttons. Select them all, go to the Elements inspector and assign them the same background color. Click in the center of the grid in the border area, set the radius to zero and hit the down arrow in the Width field to set the stroke width to zero. Click on the bottom center of the grid and click on the Width up arrow and click in the color well to give it a contrasting color.
Arrange the buttons so that the top and bottom edges align. Make sure not to overlap the bottom strokes. Select them all and use the Arrange menu to group them. Move the group so that the bottom edge is around 1 pixel higher than the bottom edge of the header / menu bar. Make sure that the button group is behind the header / menu bar.
Click on the field at the left of the timeline where it says “Main Timeline”. Select “New Timeline” from the pop-up and name it “Menu1 Timeline” or something similar. This will create the new timeline and take you there.
Make sure the time cursor is at the start, then select the button group and create a Origin (Top) keyframe (the diamond-plus icon). Drag the time cursor to the 1 second mark and create a second keyframe. Drag the button group down to the desired position.
Go back to the Main timeline. You will notice that the button group is back where it started. Now create a button on the menu bar to summon that menu. Select the button and go to the Actions inspector, select On Mouse-Up > Start Timeline > Menu1 Timeline (or whatever you called the new timeline).
Now click on the preview icon and test it out. When you click on the button it triggers the Menu 1 timeline.
Duplicate this as many times as you need, using a different timeline for each menu.
Note that if you leave that scene and return later, everything is reset.