"services"
Bootstrap 3.3.0 Snippet by evarevirus

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="title"> SERVICES </div> <div class="icons"> <ul class="menu"> <li class="active"> <span class="icon"> <svg id="js_svg-element" class="active " version="1.1" x="0px" y="0px" viewBox="0 0 150 150" enable-background="new 0 0 150 150" xml:space="preserve"> <g> <g> <path d="M75,84.8c3.7,0,6.8-3,6.8-6.8V62.8c0-3.7-3-6.8-6.8-6.8c-3.7,0-6.8,3-6.8,6.8V78C68.2,81.8,71.3,84.8,75,84.8z"/> <path d="M85.9,74h-1.4c-0.4,0-0.8,0.4-0.8,0.8v2.8c0,4.8-3.9,8.8-8.8,8.8c-4.8,0-8.8-3.9-8.8-8.8v-2.8c0-0.4-0.4-0.8-0.8-0.8h-1.4 c-0.4,0-0.8,0.4-0.8,0.8v2.8c0,5.8,4.5,10.9,10.2,11.6v2h-6c-0.4,0-0.8,0.4-0.8,0.8v1.4c0,0.4,0.4,0.8,0.8,0.8h15 c0.4,0,0.8-0.4,0.8-0.8v-1.4c0-0.4-0.4-0.8-0.8-0.8h-6v-2c5.7-0.7,10.2-5.8,10.2-11.6v-2.8C86.7,74.3,86.3,74,85.9,74z"/> </g> </g> <g display="none"> <path display="inline" d="M88.9,70.9h-3.6c0-4-3.2-7.2-7.2-7.2v-3.6C84.2,60.1,88.9,64.9,88.9,70.9z M78.1,54.7v3.6 c7,0,12.6,5.7,12.6,12.6h3.6C94.3,62,87.1,54.7,78.1,54.7z M67.8,88.3c1.1,0.7,3.1,1.5,3.1,1.5c5.8,2.1,11.2,0.2,13.9-1.9 c0.4-0.2,0.7-0.4,1-0.7c2.3-2.5,1.4-7.9-2.2-13.2c-0.5,1.1-1.6,2-2.7,2.7c2.5,4,2.9,7.2,2.2,7.9c-0.9,0.9-6.5,0-12.6-6 c-6-5.9-6.9-11.5-6-12.6c0.7-0.7,3.8-0.5,7.9,2.2c0.5-1.1,1.4-2.2,2.7-2.7c-5.4-3.6-10.6-4.7-13.2-2.2c-0.1,0.1-0.1,0.2-0.2,0.2 c0-0.2,0-0.2,0-0.2c-3.2,3.2-6.9,13,2,21.8c0.2,0.2,0.5,0.4,0.7,0.6C64.6,85.8,66.8,87.7,67.8,88.3z M67.8,71.1 c0.5,0.7,0.9,1.4,1.6,2.3l5.5-0.8c0.3,0.6,0.8,1.1,1.5,1.5l-0.8,5.5c0.7,0.5,1.6,1.1,2.3,1.4l0.9-6.6c1.6-0.3,2.8-1.8,2.8-3.5 c0-2-1.6-3.6-3.6-3.6c-1.7,0-3.1,1.1-3.5,2.7L67.8,71.1z"/> </g> <g display="none"> <path display="inline" d="M93,64.7v25.7H62.1V64.7H93 M95.6,62.1h-36V93h36V62.1L95.6,62.1z M64.7,85.3h25.7l-5.1-15.4l-7.7,10.3 L72.4,75L64.7,85.3z M67.3,69.9c-1.4,0-2.6,1.2-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6s2.6-1.1,2.6-2.6C69.9,71,68.7,69.9,67.3,69.9z M54.4,57v30.9H57V59.6h33.4V57H54.4z"/> </g> </svg> </span> <span class="text-dis">SECURE Voice</span> </li> <li class=""> <span class="icon"><svg version="1.1" x="0px" y="0px" viewBox="0 0 150 150" enable-background="new 0 0 150 150" xml:space="preserve"> <g display="none"> <g display="inline"> <path d="M75,84.3c3.5,0,6.4-2.9,6.4-6.4V63.4c0-3.5-2.9-6.4-6.4-6.4c-3.5,0-6.4,2.9-6.4,6.4v14.4C68.6,81.4,71.5,84.3,75,84.3z"/> <path d="M85.3,74h-1.3c-0.4,0-0.7,0.3-0.7,0.7v2.6c0,4.6-3.7,8.3-8.3,8.3s-8.3-3.7-8.3-8.3v-2.6c0-0.4-0.3-0.7-0.7-0.7h-1.3 c-0.4,0-0.7,0.3-0.7,0.7v2.6c0,5.5,4.3,10.3,9.7,11v1.9h-5.7c-0.4,0-0.7,0.3-0.7,0.7v1.3c0,0.4,0.3,0.7,0.7,0.7h14.2 c0.4,0,0.7-0.3,0.7-0.7V91c0-0.4-0.3-0.7-0.7-0.7h-5.7v-1.9c5.4-0.7,9.7-5.5,9.7-11v-2.6C86.1,74.4,85.7,74,85.3,74z"/> </g> </g> <g> <path d="M88.9,70.9h-3.6c0-4-3.2-7.2-7.2-7.2v-3.6C84.2,60.1,88.9,64.9,88.9,70.9z M78.1,54.7v3.6c7,0,12.6,5.7,12.6,12.6h3.6 C94.3,62,87.1,54.7,78.1,54.7z M67.8,88.3c1.1,0.7,3.1,1.5,3.1,1.5c5.8,2.1,11.2,0.2,13.9-1.9c0.4-0.2,0.7-0.4,1-0.7 c2.3-2.5,1.4-7.9-2.2-13.2c-0.5,1.1-1.6,2-2.7,2.7c2.5,4,2.9,7.2,2.2,7.9c-0.9,0.9-6.5,0-12.6-6c-6-5.9-6.9-11.5-6-12.6 c0.7-0.7,3.8-0.5,7.9,2.2c0.5-1.1,1.4-2.2,2.7-2.7c-5.4-3.6-10.6-4.7-13.2-2.2c-0.1,0.1-0.1,0.2-0.2,0.2c0-0.2,0-0.2,0-0.2 c-3.2,3.2-6.9,13,2,21.8c0.2,0.2,0.5,0.4,0.7,0.6C64.6,85.8,66.8,87.7,67.8,88.3z M67.8,71.1c0.5,0.7,0.9,1.4,1.6,2.3l5.5-0.8 c0.3,0.6,0.8,1.1,1.5,1.5l-0.8,5.5c0.7,0.5,1.6,1.1,2.3,1.4l0.9-6.6c1.6-0.3,2.8-1.8,2.8-3.5c0-2-1.6-3.6-3.6-3.6 c-1.7,0-3.1,1.1-3.5,2.7L67.8,71.1z"/> </g> <g display="none"> <path display="inline" d="M98,61.9v32.9H58.6V61.9H98 M101.3,58.6h-46V98h46V58.6L101.3,58.6z M61.9,88.1h32.9l-6.6-19.7l-9.9,13.1 L71.7,75L61.9,88.1z M65.1,68.4c-1.8,0-3.3,1.5-3.3,3.3c0,1.8,1.5,3.3,3.3,3.3c1.8,0,3.3-1.5,3.3-3.3S67,68.4,65.1,68.4z M48.7,52 v39.4H52V55.3h42.7V52H48.7z"/> </g> </svg> </span> <span class="text-dis"> SECURE GPS Tracking </span> </li> <li> <span class="icon"><svg version="1.1" x="0px" y="0px" viewBox="0 0 150 150" enable-background="new 0 0 150 150" xml:space="preserve"> <g display="none"> <g display="inline"> <path d="M75,84.3c3.5,0,6.4-2.9,6.4-6.4V63.4c0-3.5-2.9-6.4-6.4-6.4c-3.5,0-6.4,2.9-6.4,6.4v14.4C68.6,81.4,71.5,84.3,75,84.3z"/> <path d="M85.3,74h-1.3c-0.4,0-0.7,0.3-0.7,0.7v2.6c0,4.6-3.7,8.3-8.3,8.3s-8.3-3.7-8.3-8.3v-2.6c0-0.4-0.3-0.7-0.7-0.7h-1.3 c-0.4,0-0.7,0.3-0.7,0.7v2.6c0,5.5,4.3,10.3,9.7,11v1.9h-5.7c-0.4,0-0.7,0.3-0.7,0.7v1.3c0,0.4,0.3,0.7,0.7,0.7h14.2 c0.4,0,0.7-0.3,0.7-0.7V91c0-0.4-0.3-0.7-0.7-0.7h-5.7v-1.9c5.4-0.7,9.7-5.5,9.7-11v-2.6C86.1,74.4,85.7,74,85.3,74z"/> </g> </g> <g display="none"> <path display="inline" d="M88.9,70.9h-3.6c0-4-3.2-7.2-7.2-7.2v-3.6C84.2,60.1,88.9,64.9,88.9,70.9z M78.1,54.7v3.6 c7,0,12.6,5.7,12.6,12.6h3.6C94.3,62,87.1,54.7,78.1,54.7z M67.8,88.3c1.1,0.7,3.1,1.5,3.1,1.5c5.8,2.1,11.2,0.2,13.9-1.9 c0.4-0.2,0.7-0.4,1-0.7c2.3-2.5,1.4-7.9-2.2-13.2c-0.5,1.1-1.6,2-2.7,2.7c2.5,4,2.9,7.2,2.2,7.9c-0.9,0.9-6.5,0-12.6-6 c-6-5.9-6.9-11.5-6-12.6c0.7-0.7,3.8-0.5,7.9,2.2c0.5-1.1,1.4-2.2,2.7-2.7c-5.4-3.6-10.6-4.7-13.2-2.2c-0.1,0.1-0.1,0.2-0.2,0.2 c0-0.2,0-0.2,0-0.2c-3.2,3.2-6.9,13,2,21.8c0.2,0.2,0.5,0.4,0.7,0.6C64.6,85.8,66.8,87.7,67.8,88.3z M67.8,71.1 c0.5,0.7,0.9,1.4,1.6,2.3l5.5-0.8c0.3,0.6,0.8,1.1,1.5,1.5l-0.8,5.5c0.7,0.5,1.6,1.1,2.3,1.4l0.9-6.6c1.6-0.3,2.8-1.8,2.8-3.5 c0-2-1.6-3.6-3.6-3.6c-1.7,0-3.1,1.1-3.5,2.7L67.8,71.1z"/> </g> <g> <path d="M93,64.7v25.7H62.1V64.7H93 M95.6,62.1h-36V93h36V62.1L95.6,62.1z M64.7,85.3h25.7l-5.1-15.4l-7.7,10.3L72.4,75L64.7,85.3z M67.3,69.9c-1.4,0-2.6,1.2-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6s2.6-1.1,2.6-2.6C69.9,71,68.7,69.9,67.3,69.9z M54.4,57v30.9H57V59.6 h33.4V57H54.4z"/> </g> </svg> </span> <span class="text-dis"> SECURE Photo Sharing</span> </li> <li> <span class="icon"><svg version="1.1" x="0px" y="0px" viewBox="0 0 150 150" enable-background="new 0 0 150 150" xml:space="preserve"> <g display="none"> <g display="inline"> <path d="M75,84.8c3.7,0,6.8-3,6.8-6.8V62.8c0-3.7-3-6.8-6.8-6.8c-3.7,0-6.8,3-6.8,6.8V78C68.2,81.8,71.3,84.8,75,84.8z"/> <path d="M85.9,74h-1.4c-0.4,0-0.8,0.4-0.8,0.8v2.8c0,4.8-3.9,8.8-8.8,8.8c-4.8,0-8.8-3.9-8.8-8.8v-2.8c0-0.4-0.4-0.8-0.8-0.8h-1.4 c-0.4,0-0.8,0.4-0.8,0.8v2.8c0,5.8,4.5,10.9,10.2,11.6v2h-6c-0.4,0-0.8,0.4-0.8,0.8v1.4c0,0.4,0.4,0.8,0.8,0.8h15 c0.4,0,0.8-0.4,0.8-0.8v-1.4c0-0.4-0.4-0.8-0.8-0.8h-6v-2c5.7-0.7,10.2-5.8,10.2-11.6v-2.8C86.7,74.3,86.3,74,85.9,74z"/> </g> </g> <g display="none"> <path display="inline" d="M88.9,70.9h-3.6c0-4-3.2-7.2-7.2-7.2v-3.6C84.2,60.1,88.9,64.9,88.9,70.9z M78.1,54.7v3.6 c7,0,12.6,5.7,12.6,12.6h3.6C94.3,62,87.1,54.7,78.1,54.7z M67.8,88.3c1.1,0.7,3.1,1.5,3.1,1.5c5.8,2.1,11.2,0.2,13.9-1.9 c0.4-0.2,0.7-0.4,1-0.7c2.3-2.5,1.4-7.9-2.2-13.2c-0.5,1.1-1.6,2-2.7,2.7c2.5,4,2.9,7.2,2.2,7.9c-0.9,0.9-6.5,0-12.6-6 c-6-5.9-6.9-11.5-6-12.6c0.7-0.7,3.8-0.5,7.9,2.2c0.5-1.1,1.4-2.2,2.7-2.7c-5.4-3.6-10.6-4.7-13.2-2.2c-0.1,0.1-0.1,0.2-0.2,0.2 c0-0.2,0-0.2,0-0.2c-3.2,3.2-6.9,13,2,21.8c0.2,0.2,0.5,0.4,0.7,0.6C64.6,85.8,66.8,87.7,67.8,88.3z M67.8,71.1 c0.5,0.7,0.9,1.4,1.6,2.3l5.5-0.8c0.3,0.6,0.8,1.1,1.5,1.5l-0.8,5.5c0.7,0.5,1.6,1.1,2.3,1.4l0.9-6.6c1.6-0.3,2.8-1.8,2.8-3.5 c0-2-1.6-3.6-3.6-3.6c-1.7,0-3.1,1.1-3.5,2.7L67.8,71.1z"/> </g> <g display="none"> <path display="inline" d="M93,64.7v25.7H62.1V64.7H93 M95.6,62.1h-36V93h36V62.1L95.6,62.1z M64.7,85.3h25.7l-5.1-15.4l-7.7,10.3 L72.4,75L64.7,85.3z M67.3,69.9c-1.4,0-2.6,1.2-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6s2.6-1.1,2.6-2.6C69.9,71,68.7,69.9,67.3,69.9z M54.4,57v30.9H57V59.6h33.4V57H54.4z"/> </g> <g> <path d="M69.7,54C61,54,54,61.1,54,69.8c0,8.7,7.1,15.8,15.8,15.8c8.7,0,15.8-7.1,15.8-15.8S78.5,54,69.7,54z M69.7,57.1 c2.4,0,3.6,0.6,3.6,2.5s-2.8,3.7-3.6,3.7c-0.7,0-3.6-1.8-3.6-3.7S67.3,57.1,69.7,57.1z M59.2,70.3c-1.8-0.6-2.1-1.9-1.3-4.2 c0.8-2.3,1.7-3.2,3.5-2.6c1.8,0.6,2.7,3.8,2.4,4.5C63.6,68.8,61,70.9,59.2,70.3z M66.8,80.1c-1.1,1.6-2.3,1.5-4.4,0.2 c-2-1.3-2.7-2.5-1.6-4.1c1-1.6,4.4-1.6,5-1.2C66.5,75.4,67.9,78.5,66.8,80.1z M69.7,72.2c-1.3,0-2.4-1.1-2.4-2.4 c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4C72.1,71.1,71,72.2,69.7,72.2z M77.2,80c-2,1.4-3.3,1.6-4.4,0 c-1.1-1.6,0.1-4.7,0.7-5.1c0.6-0.4,4-0.6,5.1,1C79.7,77.5,79.1,78.6,77.2,80z M80.3,70.3c-1.8,0.6-4.4-1.5-4.6-2.3 c-0.2-0.7,0.6-4,2.4-4.5c1.8-0.6,2.8,0.3,3.5,2.6C82.3,68.4,82.1,69.7,80.3,70.3z M94.8,92.7L93.7,96c-0.3-0.1-6.5-2.2-6.5-7.8 c0-6.6,5.3-8.2,5.3-14.1c0-2.7-2.5-5.5-5.7-8c-0.5-2.2-1.4-4.3-2.6-6.1C89.7,63.3,96,68.4,96,74.1c0,3.6-1.6,5.9-2.9,8 c-1.3,1.9-2.3,3.5-2.3,6.1C90.8,91.2,94.8,92.7,94.8,92.7z"/> </g> </svg> </span> <span class="text-dis">SECURE Full Motion Video</span> </li> <li> <span class="icon"> <svg version="1.1" x="0px" y="0px" viewBox="0 0 150 150" enable-background="new 0 0 150 150" xml:space="preserve"> <g> <g> <g> <path d="M93,78.1c0-3.2-1.8-6.1-4.6-8c0.2,0.9,0.3,1.8,0.3,2.7c0,7.3-6.2,13.3-14.3,14.6c1.7,0.7,3.6,1.1,5.7,1.1 c1.9,0,3.8-0.4,5.4-1c2.1,0.7,4.4,0.9,6.2,0.9c-1-1.2-1.7-2.3-2.1-3.3C91.7,83.3,93,80.9,93,78.1z"/> <path d="M85.3,72.9c0-6.4-6.3-11.5-14.2-11.5c-7.8,0-14.2,5.2-14.2,11.5c0,3.3,1.7,6.3,4.5,8.4 c-0.5,1.3-1.4,3.1-2.9,4.9c2.8,0,6.5-0.4,9.3-2.1c1.1,0.2,2.2,0.3,3.3,0.3C79,84.4,85.3,79.3,85.3,72.9z"/> </g> </g> </g> </svg> </span> <span class="text-dis"> SECURE Group Chat</span> </li> </ul> </div> <div id="text-content" class="text-container1"> <p class="text_1"> The implementation of voice encryption dates back to World War II </p> <p class="text_2"> From the introduction of voice encryption to today, encryption techniques have evolved drastically. Digital technology has effectively replaced old analog methods of voice encryption and by using complex algorithms, voice encryption has become much mor.e secure and efficient. </p> <p class="text_3"> The output signals from the bandpass filters are then lowpass translated to reduce the bandwidth, which reduces the sampling rate. The lowpass signals are then quantized and encoded using special techniques like, Pulse Code Modulation (PCM). </p> </div> <div id="text-content" class="text-container2"> <p class="text_1"> The implementation of voice encryption dates back to World War II </p> <p class="text_2"> From the introduction of voice encryption to today, encryption techniques have evolved drastically. Digital technology has effectively replaced old analog methods of voice encryption and by using complex algorithms, voice encryption has become much mor.e secure and efficient. </p> <p class="text_3"> The output signals from the bandpass filters are then lowpass translated to reduce the bandwidth, which reduces the sampling rate. The lowpass signals are then quantized and encoded using special techniques like, Pulse Code Modulation (PCM). </p> </div> <div id="text-content" class="text-container3"> <p class="text_1"> The implementation of voice encryption dates back to World War II </p> <p class="text_2"> From the introduction of voice encryption to today, encryption techniques have evolved drastically. Digital technology has effectively replaced old analog methods of voice encryption and by using complex algorithms, voice encryption has become much mor.e secure and efficient. </p> <p class="text_3"> The output signals from the bandpass filters are then lowpass translated to reduce the bandwidth, which reduces the sampling rate. The lowpass signals are then quantized and encoded using special techniques like, Pulse Code Modulation (PCM). </p> </div> <div id="text-content" class="text-container4"> <p class="text_1"> The implementation of voice encryption dates back to World War II </p> <p class="text_2"> From the introduction of voice encryption to today, encryption techniques have evolved drastically. Digital technology has effectively replaced old analog methods of voice encryption and by using complex algorithms, voice encryption has become much mor.e secure and efficient. </p> <p class="text_3"> The output signals from the bandpass filters are then lowpass translated to reduce the bandwidth, which reduces the sampling rate. The lowpass signals are then quantized and encoded using special techniques like, Pulse Code Modulation (PCM). </p> </div> <div id="text-content" class="text-container5"> <p class="text_1"> The implementation of voice encryption dates back to World War II </p> <p class="text_2"> From the introduction of voice encryption to today, encryption techniques have evolved drastically. Digital technology has effectively replaced old analog methods of voice encryption and by using complex algorithms, voice encryption has become much mor.e secure and efficient. </p> <p class="text_3"> The output signals from the bandpass filters are then lowpass translated to reduce the bandwidth, which reduces the sampling rate. The lowpass signals are then quantized and encoded using special techniques like, Pulse Code Modulation (PCM). </p> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800); .container{ font-family: 'Open Sans'; width:960px; height:auto; padding-bottom:50px; margin:auto; overflow:hidden; } .title{ font-size:24px; color:#ff0000; font-weight:600; margin-top:50px; margin-bottom:30px; width:100%; text-align:center; } svg{ min-width:170px; width:20%; height:140px; fill:#cdcdcd; } .icon svg:hover{ fill:#ff0000; } .icons ul{ text-decoration:none; padding-bottom:30px; } .icons li:first-child{ margin-left:0px; color:#cdcdcd; } .icons li:last-child{ margin-right:0px; } .icons li{ width:19%; height:150px; list-style:none; display:inline-block; position:relative; font-size:14px; color:#cdcdcd; } .icons li:hover{ background-color:rgba(247, 247, 247, 1); color:red; } .icon{ width:150px; height:150px; position:absolute; width:100%; text-align:center; top:0; left:0; z-index:2; } .text-dis{ position:absolute; bottom:15px; width:100%; text-align:center; font-size:14px; font-weight:400; z-index:3; } .text{ margin-top:30px; height:250px; width:980px; overflow:hidden; margin-top:50px; margin-bottom:30px; } #text-content{ transition: linear 0.3s; width:960px; } .text-container1{ margin-left:0px; } .text-container2{ margin-left:1000px; } .text-container3{ margin-left:2000px; } .text-container4{ margin-left:3000px; } .text-container5{ margin-left:4000px; } .slide-left-1{ margin-left:0px; opacity:1.0; } .slide-left-2{ margin-left:980px; opacity:0; } .slide-left-0{ margin-left:-980px; opacity:0; } .slide-left-3{ margin-left:-1960px; opacity:0; } .slide-left-4{ margin-left:1960px; opacity:0; } .slide-left-5{ margin-left:2940px; opacity:0; } .slide-left-6{ margin-left:-2940px; opacity:0; } .slide-left-7{ margin-left:-3920px; opacity:0; } .text_1{ width:280px; padding:20px; margin-top:10px; font-size:24px; line-height:36px; float:left; font-weight:400; } .text_2{ float:left; width:280px; padding:20px; font-size:14px; line-height:25px; } .text_3{ float:left; width:280px; padding:20px; font-size:14px; line-height:25px; } .hidden{ fill:#cdcdcd; } .active{ color:#ff0000 !important; fill:#ff0000; background-color:rgba(247, 247, 247, 0.5); }
jQuery(document).ready(function () { jQuery(".menu li:first-child").hover(function(){ jQuery(".text-container1").toggleClass("slide-left-1"); }); jQuery(".menu li:nth-child(2)").hover(function(){ jQuery(".text-container1").toggleClass("slide-left-0"); jQuery(".text-container2").toggleClass("slide-left-1"); jQuery(".text-container3").toggleClass("slide-left-2"); jQuery(".text-container4").toggleClass("slide-left-4"); jQuery(".text-container5").toggleClass("slide-left-5"); jQuery(".menu li:first-child").toggleClass("active hidden"); jQuery('#js_svg-element').attr('class', ''); }, function(){ jQuery('#js_svg-element').attr('class', 'active'); jQuery(".menu li:first-child").toggleClass("active"); jQuery(".text-container1").toggleClass("slide-left-0"); jQuery(".text-container2").toggleClass("slide-left-1"); jQuery(".text-container3").toggleClass("slide-left-2"); jQuery(".text-container4").toggleClass("slide-left-4"); jQuery(".text-container5").toggleClass("slide-left-5"); }); jQuery(".menu li:nth-child(3)").hover(function(){ jQuery(".text-container1").toggleClass("slide-left-3"); jQuery(".text-container2").toggleClass("slide-left-0"); jQuery(".text-container3").toggleClass("slide-left-1"); jQuery(".text-container4").toggleClass("slide-left-2"); jQuery(".text-container5").toggleClass("slide-left-4"); jQuery(".menu li:first-child").toggleClass("active hidden"); jQuery('#js_svg-element').attr('class', ''); }, function(){ jQuery('#js_svg-element').attr('class', 'active'); jQuery(".menu li:first-child").toggleClass("active"); jQuery(".text-container1").toggleClass("slide-left-3"); jQuery(".text-container2").toggleClass("slide-left-0"); jQuery(".text-container3").toggleClass("slide-left-1"); jQuery(".text-container4").toggleClass("slide-left-2"); jQuery(".text-container5").toggleClass("slide-left-4"); }); jQuery(".menu li:nth-child(4)").hover(function(){ jQuery(".text-container1").toggleClass("slide-left-6"); jQuery(".text-container2").toggleClass("slide-left-3"); jQuery(".text-container3").toggleClass("slide-left-0"); jQuery(".text-container4").toggleClass("slide-left-1"); jQuery(".text-container5").toggleClass("slide-left-2"); jQuery(".menu li:first-child").toggleClass("active hidden"); jQuery('#js_svg-element').attr('class', ''); }, function(){ jQuery('#js_svg-element').attr('class', 'active'); jQuery(".menu li:first-child").toggleClass("active"); jQuery(".text-container1").toggleClass("slide-left-6"); jQuery(".text-container2").toggleClass("slide-left-3"); jQuery(".text-container3").toggleClass("slide-left-0"); jQuery(".text-container4").toggleClass("slide-left-1"); jQuery(".text-container5").toggleClass("slide-left-2"); }); jQuery(".menu li:nth-child(5)").hover(function(){ jQuery(".text-container1").toggleClass("slide-left-7"); jQuery(".text-container2").toggleClass("slide-left-6"); jQuery(".text-container3").toggleClass("slide-left-3"); jQuery(".text-container4").toggleClass("slide-left-0"); jQuery(".text-container5").toggleClass("slide-left-1"); jQuery(".menu li:first-child").toggleClass("active hidden"); jQuery('#js_svg-element').attr('class', ''); }, function(){ jQuery('#js_svg-element').attr('class', 'active'); jQuery(".menu li:first-child").toggleClass("active"); jQuery(".text-container1").toggleClass("slide-left-7"); jQuery(".text-container2").toggleClass("slide-left-6"); jQuery(".text-container3").toggleClass("slide-left-3"); jQuery(".text-container4").toggleClass("slide-left-0"); jQuery(".text-container5").toggleClass("slide-left-1"); }); });

Related: See More


Questions / Comments: