tabbit

Thu Sep 01 2016
Copied to clipboard! Copy reply
<div class="expose-mask"></div>
<div id="nav-wrap">
  <nav>
    <div id="nav-logo">
      <a href="/" id="nav-home-button"></a>
    </div>
    <div id="nav-items-wrap">
      <ul class="nav-items">
        <li class="nav-item has-dropdown noselect">
          <span>For You</span>
          <div class="dropdown you">
            <div class="consumer-wrap">
              <div class="dropdown-column language-learning">
                <div class="section-header">&nbsp;</div>
                <div class="section-main">
                  <ul class="language-list">
                    <li><a href="/learn-spanish">Learn Spanish</a></li>
                    <li><a href="/learn-french">Learn French</a></li>
                    <li><a href="/learn-italian">Learn Italian</a></li>
                    <li><a href="/learn-german">Learn German</a></li>
                    <li><a href="/learn-english">Learn English</a></li>
                    <li><a href="http://espanol.rosettastone.com/aprende-ingles">Aprende Ingl&eacute;s</a></li>
                    <li><a href="/buynow">See All Languages</a></li>
                  </ul>
                  <span>Ready to get started?</span>
                  <a class="main-cta" href="/demo">Try the Free Demo</a>
                  <span class="phone-no">SALES: (800) 767-3882</span>
                  <a class="retail-link" href="/retail-locations">Find a Retail Partner</a>
                </div>
              </div>
              <div class="dropdown-column">
                <div class="product-wrap">
                  <div class="product-container kids">
                    <div class="product-box">
                      <div class="product-logo">&nbsp;</div>
                      <span>Help a child to read with the Lingos!</span>
                      <a class="product-link" href="/kids">Start Reading Today</a>
                    </div>
                  </div>
                  <div class="product-container homeschool">
                    <div class="product-box">
                      <p>Homeschool Learning</p>
                      <span>Explore our award-winning homeschool curriculum options.</span>
                      <a class="product-link" href="/homeschool">Get Started Today</a>
                    </div>
                  </div>
                  <div class="product-container fitbrains">
                    <div class="product-box">
                      <div class="fb-product-logo">&nbsp;</div>
                      <div class="fb-product-description">
                        <span>Flex your brain with Fit Brains</span>
                        <a class="product-link" href="/fitbrains">Start Training Today</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item noselect">
          <a href="/k12/home" style="text-transform: uppercase; font-family: GothamBook; padding: 2px 1em; text-decoration: none; border-right: 1px solid #cdcdcd; color: black;">For Classroom</a>
        </li>
        <li class="nav-item noselect">
          <a href="/business/home" style="text-transform: uppercase; font-family: GothamBook; padding: 2px 1em; text-decoration: none; border-right: 1px solid #cdcdcd; color: black;">For Enterprise</a>
        </li>
        <li class="nav-item has-dropdown noselect">
          <span>Support</span>
          <div class="dropdown support">
            <div class="dropdown-header">
              <div class="dropdown-header-title">&nbsp;</div>
            </div>
            <div class="dropdown-main">
              <div class="dropdown-main-section support-section">
                <p>Support for you</p>
                <a class="main-cta" href="http://support.rosettastone.com/en">Support Site</a>
                <a class="secondary-cta" href="http://support.rosettastone.com/en/chat">Live Technical Support Chat</a>
                <p>Support for Classrooms &amp; Enterprises</p>
                <a class="main-cta" href="http://support.rosettastone.com/en/business">Support Site</a>
                <a class="secondary-cta" href="https://rosettastone.secure.force.com/apex/PreLiveChatForm">Live Technical Support Chat</a>
              </div>
              <div class="dropdown-main-section faqs-section">
                <p>FAQs</p>
                <ul>
                  <li class="faq"><a href="/payment-faqs#04">What is the 30 day, no-risk, money-back guarantee?</a></li>
                  <li class="faq"><a href="/feature-faqs#02">What is Rosetta Stone Language Learning Download?</a></li>
                  <li class="faq"><a href="/technical-faqs#11">Where do I renew my Language Learning Online Subscription?</a></li>
                  <li class="faq"><a href="/fb-faqs#02">What's included with Fit Brains online subscription?</a></li>
                  <li class="faq"><a href="/kidsreading-faqs#02">What will children learn in Rosetta Stone&reg; Kids Reading?</a></li>
                </ul>
                <a class="view-all-faq" href="/faq">View All FAQs</a>
              </div>
            </div>
            <div class="dropdown-footer">
              <p>MAIN NUMBER: (800) 767-3882</p>
            </div>
          </div>
        </li>
        <li class="nav-item has-dropdown noselect">
          <span><i>&#59397;</i></span>
          <div class="items-in-cart">
            <span>0</span>
          </div>
          <div class="dropdown cart">
            <div class="dropdown-header">
              <div class="dropdown-header-title">&nbsp;</div>
            </div>
            <div class="cart-full-wrap" style="display:none">
              <div class="dropdown-main">
                <div class="dropdown-main-section items-section">
                  <ul id="nav-cart-items"></ul>
                  <div class="cart-view-all">
                    <a class="secondary-cta" href="https://secure.rosettastone.com/us_en_store_view/checkout/cart/">View all items</a>
                  </div>
                </div>
                <div class="dropdown-main-section totals-section">
                  <div class="order-summary-wrap">
                    <div class="cart-order-summary">ORDER SUMMARY</div>
                    <div>
                      <span>Subtotal:</span>
                      <span id="nav-cart-subtotal">&nbsp;</span>
                    </div>
                    <div>
                      <span>Discount:</span>
                      <span id="nav-cart-discount">&nbsp;</span>
                    </div>
                    <div>
                      <span>Total:</span>
                      <span id="nav-cart-grandtotal">&nbsp;</span>
                    </div>
                    <a class="main-cta" href="https://secure.rosettastone.com/us_en_store_view/checkout/cart/">CHECKOUT NOW</a>
                  </div>
                </div>
              </div>
              <img id="cartbadge" src="http://www.rosettastone.com/lp/catalogpages/img/badge.png">
            </div>
            <div class="cart-empty-wrap">
              <div class="dropdown-main">
                <span class="empty-text">Your cart is currently empty.</span>
                <a class="main-cta nav-continue" href="javascript:navDESTROY()">CONTINUE SHOPPING</a>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item noselect search">
          <span><i>&#59398;</i></span>
          <div id="outerSearch">
            <div id="closeSearch"></div>
            <div id="innerSearch">
              <div id="searchHint">Looking for something? You're in the right place. Hit enter to see your results.</div>
              <form action="http://search.rosettastone.com/" autocomplete="off" id="search_form" method="get">
                <input autocomplete="off" autofocus="" id="q" name="q" placeholder="search..." type="text" value=""/>
                <input id="nav_search_button" style="display: none;" type="submit" value="Search"/>
              </form>
            </div>
          </div>
        </li>
        <li id="lp-chat-header" class="nav-item noselect"></li>
        <li class="nav-item noselect sign-in"><span><i>&#59396;</i> <a href="/en/login">Sign In</a></span></li>
        <li class="nav-item noselect espanol"><span>Espan&#771;ol</span></li>
      </ul>

      <!-- In mobile, show these icons  -->
      <div class="mobile-nav-icons">
        <div class="cart">
          <span class="items-in-cart"></span>
          <svg class='cart-icon' width="30" height="30" viewBox="0 0 97 75" xmlns="http://www.w3.org/2000/svg">
            <style type="text/css"><![CDATA[ .cart-icon polygon, .cart-icon circle{fill:inherit;}]]></style>
            <polygon points="0,10 72,10 60,42 12,42"></polygon>
            <polygon points="13.5,48.5 64.5,48.5 84,0 97,0 97,10 88,10 70,56 55,56 17,56"></polygon>
            <circle cx="32" cy="67" r="7"></circle>
            <circle cx="58" cy="67" r="7"></circle>
          </svg>
        </div>
        <div class="hamburger">
          <svg class="svg_hamburger" width="30" height="30" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
            <style type="text/css"><![CDATA[ .svg_hamburger line{ stroke:#333; stroke-width:1; stroke-linecap:round; } ]]></style>
            <line x1="0.5" y1="3" x2="9.5" y2="3"></line>
            <line x1="0.5" y1="5.2" x2="9.5" y2="5.2"></line>
            <line x1="0.5" y1="7.4" x2="9.5" y2="7.4"></line>
          </svg>
          <svg class="basic_x" width="30" height="30" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
            <style type="text/css"><![CDATA[ .basic_x line{ stroke:#333; stroke-width:1; stroke-linecap:round; } ]]></style>
            <line x1="2" y1="2" x2="7.5" y2="7.5"></line>
            <line x1="2" y1="7.5" x2="7.5" y2="2"></line>
          </svg>

        </div>
      </div> <!-- /mobile-nav-icons -->

    </div>
  </nav>
</div>

<!-- nav that shows when hamburger is clicked -->
<div id="hamburger-nav">
  <div class="content">
  <div class="accordion">
    <div>
      Business Benefits
      <span class='arrow'>
        <svg width="25" height="25" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
          <circle cx="5" cy="5" r="4.75" style="stroke:none; fill:#333;"></circle>
          <polygon points="4.5,3 6.5,5 4.5,7 4,6.5 5.6,5 4,3.5" style="stroke:#fff; stroke-width:0.5; stroke-linejoin:round; fill:#fff;"></polygon>
        </svg>
      </span>
    </div>
    <ul>
      <li><a href="http://www.rosettastone.com/business/rosetta-stone-benefits"><b>Benefits Overview</b></a>
        <ul>
          <li><a href="http://www.rosettastone.com/business/market-expansion">Market Expansion</a></li>
          <li><a href="http://www.rosettastone.com/business/workforce-safety">Workforce Safety</a></li>
          <li><a href="http://www.rosettastone.com/business/increase-productivity">Productivity &amp; Collaboration</a></li>
          <li><a href="http://www.rosettastone.com/business/customer-service">Customer Service</a></li>
          <li><a href="http://www.rosettastone.com/business/employee-retention">Employee Retention</a></li>
          <li><a href="http://www.rosettastone.com/business/expat-employees">Expats</a></li>
          <li><a href="http://www.rosettastone.com/business/diversity-and-inclusion">Diversity &amp; Inclusion</a></li>
          <li><a href="http://www.rosettastone.com/business/rosetta-stone-healthcare-language">Spanish In Healthcare</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="accordion">
    <div>
      Language Solutions
      <span class='arrow'>
        <svg width="25" height="25" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
          <circle cx="5" cy="5" r="4.75" style="stroke:none; fill:#333;"></circle>
          <polygon points="4.5,3 6.5,5 4.5,7 4,6.5 5.6,5 4,3.5" style="stroke:#fff; stroke-width:0.5; stroke-linejoin:round; fill:#fff;"></polygon>
        </svg>
      </span>
    </div>
    <ul>
      <li><a href="http://www.rosettastone.com/business/solutions"><b>Rosetta Stone Language Learning Suite</b></a></li>
      <li><a href="http://www.rosettastone.com/business/english-solutions"><b>English Solutions Overview</b></a>
        <ul>
          <li><a href="http://www.rosettastone.com/business/foundations">Foundations</a></li>
          <li><a href="http://www.rosettastone.com/business/advantage">Advantage</a></li>
        </ul>
      </li>
      <li><a href="http://www.rosettastone.com/business/world-language-solutions"><b>World Language Solutions Overview</b></a>
        <ul>
          <li><a href="http://www.rosettastone.com/business/foundations">Foundations</a></li>
          <li><a href="http://www.rosettastone.com/business/advantage">Advantage</a></li>
        </ul>
      </li>

      <li><a href="http://www.rosettastone.com/business/custom-solutions"><b>Custom Solutions</b></a></li>
      <li><a href="http://www.rosettastone.com/business/languages"><b>Available Languages</b></a></li>
    </ul>
  </div>

  <div class="accordion">
    <div>
      Resources
      <span class='arrow'>
        <svg width="25" height="25" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
          <circle cx="5" cy="5" r="4.75" style="stroke:none; fill:#333;"></circle>
          <polygon points="4.5,3 6.5,5 4.5,7 4,6.5 5.6,5 4,3.5" style="stroke:#fff; stroke-width:0.5; stroke-linejoin:round; fill:#fff;"></polygon>
        </svg>
      </span>
    </div>
    <ul>
      <li><a href="http://www.rosettastone.com/business/resources">Resources Overview</a></li>
      <li><a href="http://www.rosettastone.com/business/white-papers">White Papers</a></li>
      <li><a href="http://www.rosettastone.com/business/customer-stories">Customer Stories</a></li>
      <li><a href="http://www.rosettastone.com/business/videos-and-webinars">Videos &amp; Webinars</a></li>
      <li><a href="http://www.rosettastone.com/business/events">Events</a></li>
      <li><a href="http://www.rosettastone.com/business/podcasts">Podcasts</a></li>
      <li><a href="http://www.rosettastone.com/business/awards">Awards</a></li>
      <li><a href="http://www.rosettastone.com/business/blog">Blog</a></li>
      <li><a href="http://www.rosettastone.com/business/rosetta-stone-business-solution-brochures">Business Brochures Languages</a></li>
    </ul>
  </div>

  <div><a href="http://support.rosettastone.com/en/business">Support</a></div>

  <div class="request-pricing"><a href="#">Request Pricing</a></div>

  <div class="nav-footer">
    <p>Questions? Call us. <a href="tel:18007673882">1 (800) 767-3882</a></p>
    <div class="nav-social-icons">
      <a href="http://www.facebook.com/RosettaStone" target="_blank"></a>
      <a href="http://twitter.com/rosettastone" target="_blank"></a>
      <a href="http://www.youtube.com/user/rosettastone" target="_blank"></a>
      <a href="https://plus.google.com/+RosettaStone" target="_blank"></a>
    </div>
    <p>&copy; Rosetta Stone <span id="currentyear">2016</span> - All rights reserved</p>
  </div>
  </div>
</div> <!-- /hamburger nav -->




<script>
  ;(function() {

    /* hamburger click
    ---------------------------------*/

    var isMenuOpen = false
    $('#nav-items-wrap .hamburger').click(showHamburgerMenu)

    function showHamburgerMenu() {
      var classes = isMenuOpen ? ['.basic_x', '.svg_hamburger'] : ['.svg_hamburger', '.basic_x']

      // switch between hamburger and x
      $(this).find(classes[0]).fadeOut(200, function(){
        $(this).siblings(classes[1]).fadeIn()
      })

      var margin = isMenuOpen ? '-85%' : '0' // should match the css
      $('#hamburger-nav').animate({
        'margin-right':  margin
      }, function() {
        isMenuOpen = !isMenuOpen
      })
    }


    /* accordion
    ---------------------------------*/

    var expandedIndex = 0
    $accordions = $('.accordion')

    // If in mobile, register click. In desktop, hover.
    if ($('.mobile-nav-icons').is(':visible')) {
      $accordions.click(toggleAccordion)
    } else {
      $accordions.hover(toggleAccordion)
    }


    function toggleAccordion(e) {
      var $arrow = $(this).find('span.arrow')

      // Index of this .accordion div in the set
      var clickedIndex = $(this).index()

      // Cache the ul inside this .accordion
      var $ul = $(this).children('ul')

      if ($ul.height() <= 0) {
        // ul is collapsed. we will expand it
        var height = $ul.css({
          display: 'block',
          height: 'auto',
          overflow: 'auto'
        }).height()
        $ul.css({ height: 0, overflow: 'hidden' })
        $arrow.addClass('turned')
      } else {
        // ul is visible. we will collapse it
        height = 0
        $arrow.removeClass('turned')
      }

      // Hide the current expanded ul
      if (expandedIndex != clickedIndex) {
        $accordions.eq(expandedIndex).find('> ul').animate({ height: 0 })
        .parents('.accordion').find('span.arrow').removeClass('turned')

      }

      $ul.animate({
        height: height + 'px'
      },100, function() {
        if (height > 0) {
          expandedIndex = clickedIndex
        }
      })

    }


    // Update year
    var date = new Date()
    document.getElementById('currentyear').innerHTML = date.getFullYear()

    // Trigger form
    $('.request-pricing').click(function(e) {
      e.preventDefault()
      $(document).trigger('eande_requestform', {consult: 1, title: "Business", consult: 0, orgtext: "Organization"});
    })

  })()
</script>