18 Replies Latest reply: Nov 20, 2012 4:24 AM by BobLevine RSS

    Accordeon menu + Indesign DPS

    KevinHensels Community Member

      Hey everyone,

       

      I have a question concerning the following item:

      I'm currently working on a file and there's need for an accordeon menu.

       

      Of course the accordeon menu is (built with) HTML. I'm no hero at HTML so there's another party that will develop the menu.

       

      But I have to integrate the HTML menu into the indesign file like Rufus explains here:
      http://tv.adobe.com/watch/muse-feature-tour/muse-creating-content-for-dps/

       

      Each item of the menu will contain sveral buttons that eventuall should link to a page within the final DPS file.

       

      But here comes the trick question:

      Like I said earlier we want to integrate the menu into the DPS file. So if you click on the menu it should direct you to another page in the final DPS file...

      Is it possible to use the native "navto://" code in the HTML file? Just like regular buttons inside of indesign do?

       

      We're pretty stuck here... and I can't contact some HTML wizard on here, beacuse they mostly don't understand how indesign works...

       

      Thanks in advance!

       

      kevin

        • 1. Re: Accordeon menu + Indesign DPS
          BobLevine UGM

          Absolutely. Just provide the proper navto links to the HTML developer.

           

           

           

          Works like a charm.

           

           

           

          Bob

          • 2. Re: Accordeon menu + Indesign DPS
            KevinHensels Community Member

            Bob THANK YOU.

             

            You've made my day.

            • 3. Re: Accordeon menu + Indesign DPS
              Graham Davis Community Member

              Why don't you use Muse to create the HTML Kevin, it has a nice Accordian Widget that is very easy to use?

              • 4. Re: Accordeon menu + Indesign DPS
                KevinHensels Community Member

                Hi Graham, well muse is fun and all... but I'm not very good at it :'( I'm sorry!

                 

                 

                Update: I received the HTML-code for the menu today and it looks crispy clean.

                BUT,... when I drop it into indesign it doesn't seem to work like it does in the browser that I tested it in.

                 

                Actually it doesn't do anything when I tap on it (allow user interaction is on).

                 

                Is there something that needs to be changed inside the code?

                 

                I can post the code here if that would help?

                • 5. Re: Accordeon menu + Indesign DPS
                  BobLevine UGM

                  You need to link to the HTML in a web overlay, not copy it to InDesign.

                   

                  Bob

                  • 6. Re: Accordeon menu + Indesign DPS
                    KevinHensels Community Member

                    Hey Bob,

                     

                    Wel I did it the same way like I always do with Html input:

                     

                    Overlay creator > web content > and than I selected the file.

                     

                    Normally that works fine?

                    • 7. Re: Accordeon menu + Indesign DPS
                      BobLevine UGM

                      Do you have everything in the proper folders including any javascript?

                       

                       

                       

                      Bob

                      • 8. Re: Accordeon menu + Indesign DPS
                        KevinHensels Community Member

                        Hey Bob,

                         

                        I've received 1 folder containing:

                        - a folder named img (which contains jpegs and a seperate folder containg jpegs of the headers)

                        - index.html

                         

                        Opened indesign > overlay creator > webcontent and linked to the index.html

                         

                        So I still need a seperate folder containing the Js?

                        The HTML code conatins Jquery though.

                         

                        I can post it here if needed.

                        • 9. Re: Accordeon menu + Indesign DPS
                          KevinHensels Community Member

                          This is the code:

                           

                           

                          <!DOCTYPE html >

                          <html>

                          <head>

                              <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

                              <title>Untitled Document</title>

                              <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js"></script>

                           

                           

                              <style type="text/css">

                                      /* first level */

                                  div#accordion-nav {

                                      width: 378px;

                                      border: 1px solid #9C9C9C;

                                  }

                           

                           

                                  div#accordion-nav div div.header {

                                      display: block;

                                      margin: 0;

                                      font-weight: bold;

                                      background-color: #006a91;

                                      height: 53px;

                                  }

                           

                           

                                  div#accordion-nav div div.header:hover {

                                      cursor: pointer;

                                  }

                           

                           

                                      /* second level */

                                  div#accordion-nav div ul {

                                      list-style-type: none;

                                      margin: 0;

                                      height: 220px;

                                      overflow-y: scroll;

                                      overflow-x: hidden;

                                      padding-left: 0;

                                  }

                           

                           

                                  div#accordion-nav div ul li {

                                      padding: 0;

                                      border-bottom: 1px solid #dfdfdf;

                                  }

                           

                           

                                  div#accordion-nav div ul li a {

                                      text-decoration: none;

                                  }

                           

                           

                                  div#accordion-nav div ul li a img {

                                      vertical-align: middle;

                                      padding:0;

                                      width: 378px;

                                      height: 95px;

                                  }

                                      /* headers of lists */

                                  div#volvo {

                                      background: url("img/menu-headers/xxx.jpg") no-repeat;

                                  }

                                  div#terex {

                                      background: url("img/menu-headers/xxx.jpg") no-repeat;

                                  }

                                  div#mafi {

                                      background: url("img/menu-headers/xxx.jpg") no-repeat;

                                  }

                                  div#sennebogen {

                                      background: url("img/menu-headers/xxx.jpg") no-repeat;

                                  }

                                  div#sandvik {

                                      background: url("img/menu-headers/xxx.jpg") no-repeat;

                                  }

                                  div#diensten {

                                      background: url("img/menu-headers/xxx.jpg") no-repeat;

                                  }

                           

                           

                                      /* Let's get this party started */

                                  ::-webkit-scrollbar {

                                      width: 4px;

                                      padding-right: 4px;

                                  }

                                      /* Handle */

                                  ::-webkit-scrollbar-thumb {

                                      -webkit-border-radius: 3px;

                                      border-radius: 3px;

                                      background: #9C9C9C;

                                      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

                                  }

                                  ::-webkit-scrollbar-thumb:window-inactive {

                                      background: #9C9C9C;

                                  }

                              </style>

                              <script type="text/javascript">

                                  $(function () {

                                      $("div#accordion-nav div div.header").click(function () {

                                          $(this).parent().siblings().children("ul").slideUp(300);

                                          $(this).siblings("ul").slideToggle(300);

                                      });

                           

                           

                                  });

                              </script>

                           

                           

                          </head>

                          <body>

                          <div id="accordion-nav">

                              <div>

                                  <div class="header" id="xxx"></div>

                                  <ul style="display: none;">

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                  </ul>

                              </div>

                              <div>

                                  <div class="header" id="xxx"></div>

                                  <ul style="display: none;">

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                      <li>

                                          <a href="#">

                                              <img src="img/xxx.jpg">

                                          </a>

                                      </li>

                                  </ul>

                              </div>

                              <div>

                                

                           

                          and so on...

                          • 10. Re: Accordeon menu + Indesign DPS
                            BobLevine UGM

                            Everything, AFAIK, needs to be local and you're linking to an online script.

                             

                            Bob

                            • 11. Re: Accordeon menu + Indesign DPS
                              KevinHensels Community Member

                              Thanks Bob.

                               

                              So I have to ask them for a local script.

                               

                              Also, where should the navto;// links be added?

                              • 12. Re: Accordeon menu + Indesign DPS
                                BobLevine UGM

                                Just download it from the link you have there now.

                                 

                                Not sure what you mean by the second part.

                                 

                                Bob

                                • 13. Re: Accordeon menu + Indesign DPS
                                  KevinHensels Community Member

                                  Sorry Bob,

                                   

                                  I wasn't very clear.

                                   

                                  I asked the people that made the HTML for all the files, so we can test it locally.

                                  But we were both wondering where the "navto://article#" links should be added in the code?

                                  • 14. Re: Accordeon menu + Indesign DPS
                                    BobLevine UGM

                                    Anywhere you need them. Just treat them as though they were actual http links and use navto instead.

                                     

                                     

                                     

                                    This does work. I’ve used in a few projects.

                                     

                                     

                                     

                                    Bob

                                    • 15. Re: Accordeon menu + Indesign DPS
                                      KevinHensels Community Member

                                      Thanks Bob,

                                       

                                      I'm gonna inform the HTML developers about this.

                                      Thanks once again.

                                       

                                      - I might come back at this in a later stadium though.

                                      • 16. Re: Accordeon menu + Indesign DPS
                                        KevinHensels Community Member

                                        I sent them this link as well:

                                        http://help.adobe.com/en_US/digitalpubsuite/using/WS67cb9e293e2f1f60-8ad81e812b10bfd837-80 00.html

                                         

                                        I hope that will clarify things for them.

                                         

                                        This part was really interesting:

                                         

                                         

                                        Jump to InDesign article from HTML article

                                         

                                        Use the navto format to create a hyperlink from an HTML article to an InDesign article. Example:

                                        <a href="navto://newsarticle">See the News Article</a>

                                        You can also navigate to pages within an InDesign article by adding the page number after the document name. The first page of the document is 0, and the second page is 1, and so on. Example:

                                        <a href="navto://Cycling#3">Go to Page 4 of the Cycling Article</a>

                                         

                                        • 17. Re: Accordeon menu + Indesign DPS
                                          KevinHensels Community Member

                                          Thanks once again Bob,

                                           

                                          it does works like a charm .

                                           

                                          I can't say enough how much I appreciate your help.

                                           

                                          THANK YOU.

                                          • 18. Re: Accordeon menu + Indesign DPS
                                            BobLevine UGM

                                            I'm glad you got it all sorted.

                                             

                                            Bob