How can I use my bar of Navigation Html/CSS to control a stadium to edge?

I have a navigation bar HTML/CSS implemented in my CONTOUR created the page. The navigation bar is not created on the edge. I would use these buttons to control the steps.

Inside the main timeline scene have labels and measures every 1.5 seconds to create a site sliding horizontally.

Labels include: home, work, blog, profile and contact. I can easily use a symbol created for example within the border:

sym.play("home");

and animate a symbol of width 6000px on my stage 1000px, 1000px increments.

I don't want to use a symbol within the border to do this, because I can't create the effect the nav bar html/css with passage of the mouse within the border.

So I am interested to know if I can use this bar to control my main script, so I don't have to sacrifice the design for the feature.

Currently, the list of links is configured with the standard hyperlink. What is the code would use to play the scene during the click on the html navigation bar?

A big thank you to all those who can help you with this!

Here's the code for the navigation bar:

<div id="menu"><ul class="block-menu">
                    <li><a href="/home" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>
                    <li><a href="/demos" class="three-d">
                              Work
                              <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                    </a></li>
                    <li><a href="/deals" class="three-d">
                              Blog
                              <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                    </a></li>
                    <li><a href="/about" class="three-d">
                              Profile
                              <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                    </a></li>
        <li><a href="/about" class="three-d">
                              Contact
                              <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                    </a></li>
          </ul>
<span class="block-menu"></span></div>

All of the HTML code:

<!DOCTYPE html>
<html>
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
          <title>Untitled</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="workapp_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-57204389 { visibility:hidden; }
              .block-menu {
                              display: block;
                              background: #000;
                    }


                    .block-menu li {
                              display: inline-block;
                    }


                    .block-menu li a {
                              color: #fff;
                              display: block;
                              text-decoration: none;
                              font-family: 'Passion One',Arial,sans-serif;
                              -webkit-font-smoothing: antialiased;
                              -moz-font-smoothing: antialiased;
                              font-smoothing: antialiased;
                              text-transform: uppercase;
                              overflow: visible;
                              line-height: 20px;
                              font-size: 24px;
                              padding: 15px 10px;
                    }


                    /* animation domination */
                    .three-d {
                              -webkit-perspective: 200px;
                              -moz-perspective: 200px;
                              perspective: 200px;
                              -webkit-transition: all .07s linear;
                              -moz-transition: all .07s linear;
                              transition: all .07s linear;
                              position: relative;
                    }


                              .three-d:not(.active):hover {
                                        cursor: pointer;
                              }


                              .three-d:not(.active):hover .three-d-box, 
                              .three-d:not(.active):focus .three-d-box {
                                        -moz-transform: translateZ(-25px) rotateX(90deg);
                                        -webkit-transform: translateZ(-25px) rotateX(90deg);
                                        -o-transform: translateZ(-25px) rotateX(90deg);
                                        transform: translateZ(-25px) rotateX(90deg);
                              }


                    .three-d-box {
                              -webkit-transition: all .3s ease-out;
                              -moz-transition: all .3s ease-out;
                              -ms-transition: all .3s ease-out;
                              -o-transition: all .3s ease-out;
                              transition: all .3s ease-out;
                              -webkit-transform: translatez(-25px);
                              -moz-transform: translatez(-25px);
                              -o-transform: translatez(-25px);
                              transform: translatez(-25px);
                              -webkit-transform-style: preserve-3d;
                              -moz-transform-style: preserve-3d;
                              -ms-transform-style: preserve-3d;
                              -o-transform-style: preserve-3d;
                              transform-style: preserve-3d;
                              pointer-events: none;
                              position: absolute;
                              top: 0;
                              left: 0;
                              display: block;
                              width: 100%;
                              height: 100%;
                    }


                    .front {
                              -webkit-transform: rotatex(0deg) translatez(25px);
                              -moz-transform: rotatex(0deg) translatez(25px);
                              -o-transform: rotatex(0deg) translatez(25px);
                              transform: rotatex(0deg) translatez(25px);
                    }


                    .back {
                              -webkit-transform: rotatex(-90deg) translatez(25px);
                              -moz-transform: rotatex(-90deg) translatez(25px);
                              -o-transform: rotatex(-90deg) translatez(25px);
                              transform: rotatex(-90deg) translatez(25px);
                              color: #FFE7C4;
                    }


                    .front, .back {
                              display: block;
                              width: 100%;
                              height: 100%;
                              position: absolute;
                              top: 0;
                              left: 0;
                              background: black;
                              padding: 15px 10px;
                              color: white;
                              pointer-events: none;
                              -moz-box-sizing: border-box;
                              box-sizing: border-box;
                    }


    </style>
<!--Adobe Edge Runtime End-->


</head>
<body>
<div id="menu"><ul class="block-menu">
                    <li><a href="/home" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>
                    <li><a href="/demos" class="three-d">
                              Work
                              <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                    </a></li>
                    <li><a href="/deals" class="three-d">
                              Blog
                              <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                    </a></li>
                    <li><a href="/about" class="three-d">
                              Profile
                              <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                    </a></li>
        <li><a href="/about" class="three-d">
                              Contact
                              <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                    </a></li>
          </ul>
<span class="block-menu"></span></div>
<div  id="Stage" class="EDGE-57204389">
</div>


</body>
</html>

Dashboard API, I came across this:

Edge.getComposition(compId)

Anyone having problems with this same question should try this:

var targetComp = AdobeEdge.getComposition ('TARGETCOMPID');

targetComp.getStage () () .play;

in their Manager trigger or an event.

How I got to work:

  • 
                              Dynamic
                              DynamicArtisans
                    
    •

    Tags: Edge Animate

    Similar Questions

    • How can I put one of this animation of css in my project of lively edge?

      How can I put one of this animation of css in my project of lively edge?

      http://www.greensock.com/CSS3/

      the edge 3d Animation animate how?

      Sample file has 3 examlpes. I have them start with the key, but of course, you can do whatever you want.

      To use TweenMax follow these steps:

      1 load the js with yepnope files

      2. set your items and or symbols

      3. apply the greensock code, you want to these elements.

      You can either load TweenMax who has everything or only the modules that you want to use.

      Once again. check the API and samples to use.

      https://app.box.com/s/zt1iqmrvi4s3b5nxjyn3

    • How can I use a few icons on the personal bar

      I would like to see all my favorites... so, how can I use only the icons and not the text on my bookmarks bar?

    • How can I hide the page thumbnails navigation bar initially to the top of Adobe Reader and open a pdf file?

      How can I hide the page thumbnails navigation bar initially to the top of Adobe Reader and open a pdf file? I couldn't find this option on the Preferences tab? Thank you

      Under Edit - Prefs. - Documents check the box that says "Restore last display settings when reopening documents." Hide the Pages panel manually, and the next time that you open the file it should have disappeared.

    • How can I use the AppleCare with replacements USA helmet in Israel?

      How can I use an AppleCare with replacements USA headphones for my iphone in Israel 6plus? Am I covered overseas?

      Technically, no. The warranty is valid only in the country where the phone was originally sold. However, that restriction is based on the differences between the models of phones sold in different countries and the availability of substitutes service. You may very well be able to get the headphones replaced here since there is no difference between those who were included in phones AND those that are included with the phones sold in your country. Make an appointment at the genius bar or take it to your local CENTER and see what they can do for you.

    • How can I use the search option in the pdf file in my mobile? [Android]

      How can I use the search option in the pdf file in my mobile?

      Yes, the text search is also available on Android Acrobat. After you open a PDF file, look in the top bar of the magnifying glass icon. If the top bar is not visible, tap anywhere on the screen to make it appear again.

      Thank you

      Acrobat DC team Mobile

    • How can I configure image of different navigation to individual pages

      Dear DW users,
      I created a navigation bar for a site using four images. Using the bar of navigation behaviour image, I used the basic settings to fill the navigation bar. However please can someone help me solve this problem? What I want is for the page that the user navigates to have a menu item that is disabled and also different from the addictive options.

      Thank you
      Lloyd

      Hi Murray,
      Thanks for your reply and the solution to the nav button problem I had. I found a way while I was waiting a response well.

      I did put the NAV in an editable region and then on each page created from the model just set the image down by default. But I will watch your solution as a way to save time in having this in the template file and thus save time, editing the net asset value on each page.

      Thanks again.
      Lloyd Codrington

    • How can I use my photo albums as screensaver with Apple TV 4th gen

      How can I use a photo album that I created as a screensaver on the generation of Apple TV 4 because it is not an option in this sense?

      What follows is the Apple TV 4 user guide...

      Screensavers

      Apple TV displays a screen saver when it remains inactive for a predefined number of minutes.

      Air screensaver shows beautiful videos of slow motion of the places of the world, upload to an online server, making the screen saver more engaging and dynamic. For the antenna, you can control how many times Apple TV check and download new videos.

      Change the frequency of aerial screensaver download. In settings, go to general > screen saver and select Download New Videos, and then select an option.

      Return by using Apple TV. When the screen saver is active, press the contact surface to get to some app have been previously using.

      Choose a different screen saver. In settings, go to general > screen saver and select the Type. Then select the screen saver you want to use.

      Select the photos to display. Many of the screen saver options display a slide show of photos - it can include photos provided by Apple, or your own collection stored in iCloud. To choose which photos are used, in the settings, go to general > screen saver and select the Type. Then choose one of the types of screensaver-photographers.

      If you choose my Photos, the Photos app opens. Follow the instructions to put photos as screensaver.

      Set the screensaver time-out. In settings, go to general > screen saver and select the setting starts after, and then specify a number of minutes. This indicates to the Apple TV to start the screen saver automatically if the unit has been idle for the specified time.

      Activate the screen saver immediately. Press the Home button to go to the home screen (if it isn't already), and then press the button twice.

    • How can I use Windows on the Mac desktop?

      How can I use Windows on MAC desktop products?  OS X El Capitan

      You can install it in BootCamp or virtual VMWare, Parallels or VirtualBox machine

    • How can I use my watch to snap the shutter on my iPhone?

      How can I use my watch to snap the shutter on my iPhone?

      Click here > https://help.apple.com/watch/

      Then click on: Remote Camera on the left.

      You'll see instructions.

    • How can I use firefox to open the public sybercafe.

      How can I use firefox in open public sybercafe.and what precautions should be taken.

      Hi, you can use the Firefox private - browsing Mode navigate the web without saving the information on the sites you visit

      The incognito on Firefox for Android

    • How can I use my instore credit for a movie

      How can I use my instore credit for a movie

      Hello R Larson,

      I see that you are wanting to use a store credit for a movie. I'll be happy for you have said in the right direction. First of all, let's see if we can find out if the credit is a credit of iTunes gift card or a credit from the Apple Store. This article will help you determine what may be:

      What kind of card do I? -Apple Support

      If credit is iTunes, you can just check your balance using the instructions found in the section below and use to either rent or buy a movie to display:

      See your credit balance - Apple Support iTunes

      If the store is an Apple Store Gift card credit, you would not be able to use iTunes to watch a movie.

      I hope this helps. See you soon!

    • How can we use this page Windows Genuine?

      How can we use this page once the developers of Firefox has removed the option "Enable Java"?

      Now, I downloaded this tool to check if the Windows Genuine or not! But kept getting the error message during the installation of the application.

      This is not sound/look like a problem of firefox at all, but could be a problem with the integrity of your windows system (perhaps related to malicious software): http://support.microsoft.com/kb/2617842/en-us

    • How can I use my PC speakers to hear my phone iphone 6s calls?

      How can I use my PC speakers to hear my phone iPhone 6s calls?

      If your 'PC' was a Mac, you can use the continuity.  But if your PC is a Windows PC, you're out of luck.

      Continuity allows you to connect your iPhone, iPad, iPod touch and Mac - Apple Support

    • I bought an iphone 4 on ebay but it's locked, icloud so I am not able to use it, and the previous owner is available to remove the device from their account: How can I use the appliance?

      I bought an iphone 4 on ebay but it's locked, icloud so I am not able to use it, and the previous owner is available to remove the device from their account: How can I use the appliance?

      You can not. Try to return the unit and get your money back. There is absolutely no way for you to unlock the device,

    Maybe you are looking for

    • ITUNES STARTS TO SPIN AND I DON'T KNOW WHY

      So my Itunes kept turning on and I couldn't understand why.  Then I realize that I have a box of apple with a remote control.  Whenever I used my remote to the box from apple he worked on my mackbbook pro 2009 which enabled itunes open with other thi

    • Why my A30-S203 fans work all the time?

      Hello everyone, Fans of my A30-S203 always working at the intermediate level. In fact my average CPU usage is not more 3 percent. But these fans never cease.What could be the problem? This sound is really annoying me. And I think that it could also c

    • Built app crashes instantly

      I am building an application in Labview 2010 Professional (upgrade to the latest patch, f4) The application is built successfully, but when I run my application built, it crashes instantly (on the same computer, I built it on) declaration of an accid

    • two schemas ip printing to a Multi function device printer.

      Hello, I would like to know if I can incorporate a router to allow printing of two PC on different segments (192.168.x.x is and the other is 10.0.x.x) this must be done for security reasons. We want that the two PC of to print on a minolta multifunct

    • Apple Mobile Device Error 1053

      Running Windows Home Premiun 7, 64 bit. I tried to upgrade to iTunes 12.1.1 and I got the error 1053 Apple Mobile Device. After that hit "Ignore" and it appeared that iTunes loaded, I went to open iTunes and got the 7 error (error Windows 193) and no