Mobile Nav and Dropdown Animations

Developer
Alex Sperellis
Size
13,779 Kb
Views
26,312
  1. Mobile Nav and Dropdown Animations Previews
  2. Mobile Nav and Dropdown Animations HTML Codes
  3. Mobile Nav and Dropdown Animations CSS Codes
  4. Mobile Nav and Dropdown Animations JS Codes

How do I make an mobile nav and dropdown animations?

Animation tests for sliding open the simon.com mobile nav and sliding down our custom dropdowns. What is a mobile nav and dropdown animations? How do you make a mobile nav and dropdown animations? This script and codes were developed by Alex Sperellis on 16 September 2022, Friday.

Mobile Nav and Dropdown Animations Previews
IQ Test

Mobile Nav and Dropdown Animations - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile Nav and Dropdown Animations</title> <link rel='stylesheet prefetch' href='http://alexsperellis.com/simon-styles/styles/simon-styles.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--Global SVGs for plus and minus icon-->
<div class="hidden-xs-up"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="icon-arrow-down" viewBox="0 0 20 8.9"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M10 8.9L0 1.2.9 0 10 7l9.1-7 .9 1.2z"></path> </symbol> <symbol id="icon-arrow-down-large" viewBox="0 0 51 20.7"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M25.5 20.7L0 1.2 1 0l24.5 18.8L50 0l1 1.2z"></path> </symbol> <symbol id="icon-cart" viewBox="0 0 20 14.1"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <circle cx="7.8" cy="12.7" r="1.4"></circle> <circle cx="15.5" cy="12.7" r="1.4"></circle> <path d="M16 9.4H7.3L2.8 1.5H0V0h3.7l4.5 7.9h6.9l3.6-6.2 1.3.7z"></path> </symbol> <symbol id="icon-cart-full" viewBox="0 0 20 14.1"> <style> .st0 { fill: #fff; } .adst1 { fill: #9e1e5e; } </style> <circle cx="7.8" cy="12.7" r="1.4"></circle> <circle cx="15.5" cy="12.7" r="1.4"></circle> <path d="M16 9.4H7.3L2.8 1.5H0V0h3.7l4.5 7.9h6.9l3.6-6.2 1.3.7z"></path> <circle class="adst1" cx="15.5" cy="2.4" r=".8"></circle> <circle class="adst1" cx="7.8" cy="2.4" r=".8"></circle> <circle class="adst1" cx="10.3" cy="2.4" r=".8"></circle> <circle class="adst1" cx="12.9" cy="2.4" r=".8"></circle> <circle class="adst1" cx="9.1" cy="4.4" r=".8"></circle> <circle class="adst1" cx="11.6" cy="4.4" r=".8"></circle> <circle class="adst1" cx="14.2" cy="4.4" r=".8"></circle> <circle class="adst1" cx="10.4" cy="6.3" r=".8"></circle> <circle class="adst1" cx="12.9" cy="6.3" r=".8"></circle> </symbol> <symbol id="icon-close" viewBox="0 0 11.7 11.7"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M11.7 10.6L6.9 5.8l4.8-4.7L10.6 0 5.8 4.8 1.1 0 0 1.1l4.8 4.7L0 10.6l1.1 1.1 4.7-4.8 4.8 4.8z"></path> </symbol> <symbol id="icon-close-circle" viewBox="0 0 20 20"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M10 0C4.5 0 0 4.5 0 10s4.5 10 10 10 10-4.5 10-10S15.5 0 10 0zm0 18.5c-4.7 0-8.5-3.8-8.5-8.5S5.3 1.5 10 1.5s8.5 3.8 8.5 8.5-3.8 8.5-8.5 8.5z"></path> <path d="M13.3 5.7L10 8.9 6.7 5.7l-1 1L8.9 10l-3.2 3.3 1 1 3.3-3.2 3.3 3.2 1-1-3.2-3.3 3.2-3.3z"></path> </symbol> <symbol id="icon-diamond" viewBox="0 0 14 14"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M.07 7l7-7 7 7-7 7z"></path> </symbol> <symbol id="icon-download" viewBox="0 0 20 17.9"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M18.5 13.4v3h-17v-3H0v4.5h20v-4.5zm-8.5-1l3.8-5.5h-3V0H9.3v6.9H6.2z"></path> </symbol> <symbol id="icon-edit" viewBox="0 0 20 18.9"> <style> .st0 { fill: #fff; } .aist1 { fill: #9e1e5e; } </style> <path class="aist1" d="M16.9 18.9H0V2h10.3v1.5H1.5v13.9h13.9v-6.7h1.5z"></path> <path class="aist1" d="M14.1 2.6L7.7 9 6 14l5-1.7 6.4-6.4-3.3-3.3zm-3.5 9l-2.2.7-.7-.7.7-2.2.9-.1 1.4 1.4-.1.9zm8.2-7.1l1-1c.4-.4.4-.9 0-1.3l-2-2c-.4-.4-.9-.4-1.3 0l-1 1 3.3 3.3z"></path> </symbol> <symbol id="icon-email" viewBox="0 0 24.9 17.1"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M0 0v17.1h24.9V0H0zm22.5 1.5l-10.1 9.2-10-9.2h20.1zm-21 1.2l6.4 5.9-6.4 5.9V2.7zm.9 12.9l6.6-6 3.4 3.1 3.4-3.1 6.6 6h-20zm21-1.1L17 8.6l6.4-5.9v11.8z"></path> </symbol> <symbol id="icon-help-circle" viewBox="0 0 20 20"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M10 1.5c4.7 0 8.5 3.8 8.5 8.5s-3.8 8.5-8.5 8.5-8.5-3.8-8.5-8.5S5.3 1.5 10 1.5M10 0C4.5 0 0 4.5 0 10s4.5 10 10 10 10-4.5 10-10S15.5 0 10 0z"></path> <path d="M9.2 12.1v-.6c0-.9.3-1.6 1.2-2.2l.7-.5c.5-.4.7-.8.7-1.3 0-.8-.5-1.5-1.6-1.5s-1.7.9-1.7 1.7c0 .2 0 .5.1.7l-1.7-.1c-.1-.2-.1-.5-.1-.7 0-1.5 1.1-3.1 3.4-3.1 2.2 0 3.4 1.5 3.4 3 0 1.2-.6 2-1.5 2.6l-.6.4c-.5.3-.7.8-.7 1.4v.2H9.2zm.8 1.1c.6 0 1.1.5 1.1 1.1s-.5 1.1-1.1 1.1c-.6 0-1.1-.5-1.1-1.1s.5-1.1 1.1-1.1z"></path> </symbol> <symbol id="icon-lock" viewBox="0 0 25 31.3"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M21.2 15V9c0-5-3.7-9-8.7-9S3.8 4 3.8 9v6H0v16.3h25V15h-3.8zm-7.5 8.1v3c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1v-3c-.7-.4-1.1-1.1-1.1-1.9 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 .8-.5 1.5-1.1 1.9zm4.6-8.1H6.7V9c0-3 2.8-5.4 5.8-5.4S18.3 6 18.3 9v6z"></path> </symbol> <symbol id="icon-minus" viewBox="0 0 15 15"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M0 6.7h15v1.5H0z"></path> </symbol> <symbol id="icon-nav" viewBox="0 0 20 20"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M10 1.5c4.7 0 8.5 3.8 8.5 8.5s-3.8 8.5-8.5 8.5-8.5-3.8-8.5-8.5S5.3 1.5 10 1.5M10 0C4.5 0 0 4.5 0 10s4.5 10 10 10 10-4.5 10-10S15.5 0 10 0z"></path> <path d="M6 9.9l7.8-3.5-3.5 7.8-1-3.2z"></path> </symbol> <symbol viewBox="0 0 6.9 11.7" id="icon-pagination-left"><path class="aost0" d="M5.8 11.7l1.1-1.1-4.8-4.7 4.8-4.8L5.8 0 0 5.9z"></path></symbol> <symbol viewBox="0 0 6.9 11.7" id="icon-pagination-right"><path class="apst0" d="M1.1 0L0 1.1l4.8 4.7L0 10.6l1.1 1.1 5.8-5.9z"></path></symbol> <symbol id="icon-pin" viewBox="0 0 20 26.8"> <style> .aqst0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M10 0C4.3 0 0 4.3 0 10c0 6.4 7.7 15 10 16.8C12.3 25 20 16.4 20 10c0-5.7-4.3-10-10-10z"></path> <circle class="aqst0" cx="10" cy="9.8" r="5.8"></circle> </symbol> <symbol id="icon-plus" viewBox="0 0 15 15"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M15.3 6.8H8.5V0H7v6.8H.3v1.5H7V15h1.5V8.3h6.8z"></path> </symbol> <symbol id="icon-printer" viewBox="0 0 20 20.7"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M17.5 5.7V0H2.6v5.7H0v9.2h2.6v5.8h14.8v-5.8H20V5.7h-2.5zM4.1 1.5H16v4.2H4.1V1.5zM17 11.9h-1v7.3H4.1v-7.3H3v-2h14v2z"></path> <path d="M6.9 15.2H13v1H6.9zm0-2.5H13v1H6.9z"></path> </symbol> <symbol id="icon-search" viewBox="0 0 20 21.3"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M20 20.3l-6.9-6.9c1.5-1.4 2.4-3.4 2.4-5.6C15.5 3.5 12 0 7.8 0 3.5 0 0 3.5 0 7.8s3.5 7.8 7.8 7.8c1.5 0 2.9-.4 4.1-1.2l7 7 1.1-1.1zM1.5 7.8c0-3.5 2.8-6.3 6.3-6.3s6.3 2.8 6.3 6.3S11.2 14 7.8 14c-3.5 0-6.3-2.8-6.3-6.2z"></path> </symbol> <symbol id="icon-slider-left" viewBox="0 0 76 142.3"> <style> .aust0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path class="aust0" d="M.1 0l76 71.1-76 71.2z"></path> <path d="M34 96L8.1 71.1l25.4-24.4 1.1 1.1-24.3 23.3L35 94.9z"></path> </symbol> <symbol id="icon-slider-right" viewBox="0 0 76 142.3"> <style> .avst0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path class="avst0" d="M76 142.3L0 71.1 76 0z"></path> <path d="M42.5 95.6l-1.1-1.1 24.3-23.4L41 47.3l1-1 25.9 24.8z"></path> </symbol> <symbol id="icon-upload" viewBox="0 0 20 17.9"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M18.5 13.4v3h-17v-3H0v4.5h20v-4.5zM10 0L6.2 5.5h3.1v6.9h1.5V5.5h3z"></path> </symbol> <symbol viewBox="0 0 50 50" id="icon-wifi"><path d="M10.1 28.5c-.1.1-.1.1 0 0l4.8 5.7c5.7-6 14.5-6 20.2 0l4.9-5.6-.1-.1c-8.2-9.4-21.6-9.4-29.8 0z"></path><path d="M.1 16.9c-.1 0-.1.1 0 0l4.9 6 .1-.1c11-12.5 28.8-12.5 39.8 0l.1.1 5-5.7C43.3 9.6 34.5 5.4 25 5.4 15.6 5.3 6.7 9.3.1 16.9z"></path><circle cx="25" cy="41.1" r="3.6"></circle></symbol> <symbol id="icon-zoom-in" viewBox="0 0 25 25"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M23.5 1.5v22h-22v-22h22M25 0H0v25h25V0z"></path> <path d="M20 11.8h-6.7V5h-1.5v6.8H5v1.5h6.8V20h1.5v-6.7H20z"></path> </symbol> <symbol id="icon-zoom-in-large" viewBox="0 0 35 35"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M33.5 1.5v32h-32v-32h32M35 0H0v35h35V0z"></path> <path d="M28 16.7h-9.7V7h-1.5v9.7H7v1.5h9.8V28h1.5v-9.8H28z"></path> </symbol> <symbol id="icon-zoom-out" viewBox="0 0 25 25"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M23.5 1.5v22h-22v-22h22M25 0H0v25h25V0z"></path> <path d="M5 11.8h15v1.5H5z"></path> </symbol> <symbol id="icon-zoom-out-large" viewBox="0 0 35 35"> <style> .st0 { fill: #fff; } .st1 { fill: #9e1e5e; } </style> <path d="M33.5 1.5v32h-32v-32h32M35 0H0v35h35V0z"></path> <path d="M7 16.8h21v1.5H7z"></path> </symbol> <symbol viewBox="0 0 300 17" id="logo-giftcard"><path d="M61.2 4.6c-2.3-1.1-4.5-1.7-6.9-1.7-1.6 0-2.7.2-3.6.5-.8.4-1.2.9-1.2 1.5 0 .7.4 1.2 1.3 1.5.6.2 1.7.4 3.1.5 2.1.1 3.5.2 4.1.3 1.9.3 3.3.7 4.2 1.4s1.4 1.7 1.4 2.9c0 1.6-.7 2.9-2.1 3.7-1.4.9-3.5 1.3-6.1 1.3-3.9 0-6.9-.9-9-2.6l1.4-1.8c2.4 1.5 4.9 2.2 7.7 2.2 1.8 0 3.2-.2 4.1-.7.9-.5 1.4-1.1 1.4-2 0-1-.6-1.6-1.8-1.9-.6-.2-2.4-.3-5.2-.5-2.5-.2-4.3-.5-5.3-1-1.2-.6-1.8-1.6-1.8-3s.7-2.6 2-3.4S52.1.6 54.6.6c3.3 0 6 .7 8.2 2.2l-1.6 1.8zM67.3.9h2.5v15.2h-2.5zm28.1 15.3h-2.5V3.8h-.1l-7.9 9.9-7.8-9.9H77v12.4h-2.5V1h3.2l7.3 9.2L92.3 1h3.1zm23.4-7.6c0 2.5-1 4.5-3.1 6-1.8 1.3-4 2-6.7 2s-4.9-.7-6.7-2c-2-1.5-3.1-3.5-3.1-6 0-2.4 1-4.4 3.1-6 1.8-1.4 4-2.1 6.7-2.1 2.6 0 4.9.7 6.6 2.1 2.2 1.6 3.2 3.6 3.2 6m-2.6 0c0-1.8-.8-3.2-2.3-4.3-1.3-1-2.9-1.4-4.8-1.4-2.1 0-3.8.5-5.2 1.6-1.3 1.1-2 2.5-2 4.1 0 1.7.6 3.1 2 4.2 1.3 1.1 3 1.6 5.2 1.6s3.9-.5 5.2-1.6c1.2-1.1 1.9-2.5 1.9-4.2M137.4 1v12.5L125.8 1h-3.1v15.2h2.5V3.8l11.6 12.4h3.1V1zM28.4.8L10.8 13.6l-6.9-5 6.9-5 4.9 3.6 1.9-1.4-6.8-5L0 8.6l10.8 7.9L28.4 3.6l6.9 5-6.9 5-4.8-3.5-2 1.4 6.8 5 10.8-7.9zm137.7 12.7c-1.7 2.1-4.4 3.3-7.7 3.3-2.6 0-4.9-.8-6.5-2.1-1.9-1.6-2.8-3.6-2.8-6.1 0-2.4 1-4.5 2.8-6 1.6-1.4 4-2.2 6.5-2.2 3.3 0 5.8 1 7.8 3.3l-1.3.8c-1.9-1.9-3.9-2.8-6.5-2.8-2.1 0-4 .7-5.4 1.8-1.6 1.3-2.4 3-2.4 5.1 0 4.1 3.1 6.9 7.8 6.9 4 0 6.7-1.9 7.6-5.5h-8.2V8.7h9.9c-.2 2-.7 3.6-1.6 4.8M171.7.9h1.4v15.5h-1.4zm7.8 1.3v5.3h9.1v1.4h-9.1v7.5h-1.3V.9h14.4v1.3zm23.8 0v14.2h-1.4V2.2h-7.4V.9h16.2v1.3zm24.6 2.1c-1.7-1.8-3.9-2.6-6.8-2.6-2.1 0-4 .6-5.3 1.7-1.7 1.3-2.5 3.1-2.5 5.2 0 4.1 3.1 6.9 7.8 6.9 3 0 5.2-.8 6.8-2.6l1.2.7c-1.5 2-4.2 3.1-7.7 3.1-2 0-3.8-.4-5.3-1.2-2.7-1.4-4.2-3.9-4.2-7 0-2.5 1-4.5 2.9-6.1 1.6-1.3 3.9-2.1 6.4-2.1 3.5 0 6.3 1.2 8 3.4l-1.3.6zm12.4-2.1h-.2l-4.7 8.8h9.5l-4.6-8.8zm7.5 14.2l-2.1-4h-10.9l-2.2 4H231L239.2.9h2.1l8.2 15.5h-1.7zm19.4-11c0-2.2-1.2-3.2-3.7-3.2h-9.7v6.4H264c2 .1 3.2-1.1 3.2-3.2m-.1 11l-4.9-6.4h-8.5v6.4h-1.4V.9H264c2.9 0 4.7 1.8 4.7 4.6 0 2.7-1.7 4.3-4.7 4.5l4.7 6.4h-1.6zm20.1-3.2c1-1.2 1.6-2.7 1.6-4.4 0-3.9-2.6-6.5-6.4-6.5h-8v12.8h8.4c1.8-.1 3.3-.7 4.4-1.9m3.2-4.4c0 2.1-.8 4-2.2 5.4-1.4 1.4-3.3 2.1-5.5 2.1H273V.9h9.2c5.1 0 8.2 3 8.2 7.9m7-5.3c0-.4-.2-.5-.7-.5h-.5v1h.5c.4 0 .7-.2.7-.5m-.1 2.5l-.7-1.5h-.5V6h-.7V2.4h1.3c1 0 1.5.4 1.5 1 0 .4-.2.7-.8.9l.8 1.6-.9.1zm-.6-4.6c-1.6 0-2.8 1.2-2.8 2.8s1.2 2.8 2.8 2.8c1.6 0 2.8-1.2 2.8-2.8s-1.2-2.8-2.8-2.8m-.1 6.1c-1.8 0-3.2-1.5-3.2-3.4 0-1.7 1.5-3.2 3.3-3.2 1.9 0 3.3 1.4 3.3 3.3 0 1.8-1.5 3.3-3.4 3.3"></path></symbol> <symbol viewBox="0 0 69.3 36" id="logo-malls"><path d="M38.3 0L26.2 8.8l-4.7-3.4L26.2 2l3.4 2.4 1.3-1L26.2 0l-7.5 5.4 7.5 5.4L38.3 2l4.8 3.4-4.8 3.4L35 6.4l-1.4 1 4.7 3.4 7.5-5.4zM23.2 35.9v-3.2l-2.1 2.6-2-2.6v3.2h-.7v-4h.8l1.9 2.4 2-2.4h.8v4zm4.7-3.4l-1 1.9h2l-1-1.9zm1.8 3.4l-.5-.9h-2.7l-.5.9h-.7l2.1-4h.8l2.1 4h-.6zm2.2 0v-4h.6v3.4h3.1v.6zm5.1 0v-4h.7v3.4h3.1v.6zm6.7-3.5c-.8 0-1.3.2-1.3.5 0 .2.1.3.3.4.4.2 1.1.1 1.9.2 1 .1 1.5.5 1.5 1.1 0 .8-.8 1.3-2.2 1.3-1 0-1.8-.2-2.4-.7l.4-.5c.6.4 1.3.6 2 .6.9 0 1.4-.3 1.4-.7 0-.6-.7-.6-1.8-.6-1.2-.1-1.8-.3-1.8-1s.7-1.2 2-1.2c.9 0 1.6.2 2.2.6l-.4.4c-.6-.2-1.2-.4-1.8-.4"></path><path d="M38.3 0L26.2 8.8l-4.7-3.4L26.2 2l3.4 2.4 1.3-1L26.2 0l-7.5 5.4 7.5 5.4L38.3 2l4.8 3.4-4.8 3.4L35 6.4l-1.4 1 4.7 3.4 7.5-5.4zm-28 18.6c-1.6-.8-3.1-1.2-4.7-1.2-1.1 0-1.9.1-2.5.4-.6.3-.9.6-.9 1 0 .5.3.8.9 1 .4.2 1.1.3 2.1.3 1.4.1 2.4.2 2.9.2 1.3.2 2.3.5 2.9 1 .6.5.9 1.1.9 2 0 1.1-.5 2-1.5 2.6-1 .6-2.4.9-4.2.9-2.7 0-4.7-.6-6.2-1.8l1-1.3c1.6 1 3.4 1.5 5.3 1.5 1.2 0 2.2-.2 2.8-.5.6-.3 1-.8 1-1.3 0-.7-.4-1.1-1.3-1.3-.4-.1-1.6-.2-3.6-.4-1.7-.1-2.9-.3-3.6-.7-.8-.4-1.2-1.1-1.2-2 0-1 .5-1.8 1.4-2.3.9-.6 2.2-.9 3.9-.9 2.3 0 4.1.5 5.7 1.5l-1.1 1.3zm4.2-2.5h1.7v10.5h-1.7zm19.4 10.5h-1.8v-8.5l-5.5 6.8-5.4-6.8v8.5h-1.7V16.1h2.1l5.1 6.4 5-6.4h2.2zM50 21.4c0 1.7-.7 3.1-2.1 4.2-1.2.9-2.8 1.4-4.6 1.4-1.9 0-3.4-.5-4.6-1.4-1.4-1.1-2.1-2.4-2.1-4.1 0-1.7.7-3.1 2.1-4.1 1.3-.9 2.8-1.4 4.6-1.4 1.8 0 3.3.5 4.6 1.4 1.4.9 2.1 2.3 2.1 4m-1.8 0c0-1.2-.5-2.2-1.6-3-.9-.7-2-1-3.3-1-1.5 0-2.6.4-3.6 1.1s-1.4 1.7-1.4 2.8c0 1.2.4 2.1 1.3 2.9.9.7 2.1 1.1 3.6 1.1s2.7-.4 3.6-1.1c.9-.7 1.4-1.7 1.4-2.8m14.6-5.3v8.6l-8-8.6h-2.2v10.5h1.8V18l8 8.6h2.1V16.1zm4.3.5c0-.1-.1-.3-.3-.3-.2 0-.3.1-.3.3 0 .1.1.2.2.2h.2c.3.1.4.2.4.4s-.2.4-.5.4c-.4 0-.5-.2-.6-.5l.2-.1c0 .2.1.3.4.3.2 0 .3-.1.3-.2s-.1-.2-.2-.2h-.2c-.2 0-.4-.2-.4-.4s.2-.5.5-.5.5.2.5.4l-.2.2zm1.9 1.1v-1.1l-.5 1.1h-.2l-.5-1.1v1.1h-.2v-1.5h.3l.5 1.3.6-1.3h.3v1.5z"></path></symbol> <symbol viewBox="0 0 69.3 36" id="logo-mills"><path d="M24.8 35.9v-3.2l-2.1 2.6-2-2.6v3.2H20v-4h.8l1.9 2.4 1.9-2.4h.9v4zm2.8-4h.7v4h-.7zm2.7 4v-4h.6v3.4H34v.6zm5.2 0v-4h.6v3.4h3.1v.6zm6.6-3.5c-.8 0-1.3.2-1.3.5 0 .2.1.3.3.4.4.2 1.1.1 1.9.2 1 .1 1.5.5 1.5 1.1 0 .8-.8 1.3-2.2 1.3-1 0-1.8-.2-2.4-.7l.4-.5c.6.4 1.3.6 2 .6.9 0 1.4-.3 1.4-.7 0-.6-.7-.6-1.8-.6-1.2-.1-1.8-.3-1.8-1s.7-1.2 2-1.2c.9 0 1.6.2 2.2.6l-.4.4c-.6-.2-1.2-.4-1.8-.4M38.3 0L26.2 8.8l-4.7-3.4L26.2 2l3.3 2.4 1.4-1L26.2 0l-7.5 5.4 7.5 5.4L38.3 2l4.8 3.4-4.8 3.4L35 6.4l-1.4 1 4.7 3.4 7.5-5.4zm-28 18.6c-1.6-.8-3.1-1.2-4.7-1.2-1.1 0-1.9.1-2.5.4-.6.3-.9.6-.9 1 0 .5.3.8.9 1 .4.2 1.1.3 2.1.3 1.4.1 2.4.2 2.9.2 1.3.2 2.3.5 2.9 1s.9 1.1.9 2c0 1.1-.5 2-1.5 2.6-1 .6-2.4.9-4.2.9-2.7 0-4.7-.6-6.2-1.8l1-1.3c1.6 1 3.4 1.5 5.3 1.5 1.2 0 2.2-.2 2.8-.5.6-.3 1-.8 1-1.3 0-.7-.4-1.1-1.3-1.3-.4-.1-1.6-.2-3.6-.4-1.7-.1-2.9-.3-3.6-.7-.8-.4-1.2-1.1-1.2-2 0-1 .5-1.8 1.4-2.3.9-.6 2.2-.9 3.9-.9 2.3 0 4.1.5 5.7 1.5l-1.1 1.3zm4.2-2.5h1.7v10.5h-1.7zm19.4 10.5h-1.8v-8.5l-5.5 6.8-5.4-6.8v8.5h-1.7V16.1h2.1l5.1 6.4 5-6.4h2.2zM50 21.4c0 1.7-.7 3.1-2.1 4.2-1.2.9-2.8 1.4-4.6 1.4-1.9 0-3.4-.5-4.6-1.4-1.4-1.1-2.1-2.4-2.1-4.1 0-1.7.7-3.1 2.1-4.1 1.3-.9 2.8-1.4 4.6-1.4 1.8 0 3.3.5 4.6 1.4 1.4.9 2.1 2.3 2.1 4m-1.8 0c0-1.2-.5-2.2-1.6-3-.9-.7-2-1-3.3-1-1.5 0-2.6.4-3.6 1.1-.9.7-1.4 1.7-1.4 2.8 0 1.2.4 2.1 1.3 2.9.9.7 2.1 1.1 3.6 1.1s2.7-.4 3.6-1.1c.9-.7 1.4-1.7 1.4-2.8m14.6-5.3v8.6l-8-8.6h-2.2v10.5h1.8V18l8 8.6h2.1V16.1zm4.3.5c0-.1-.1-.3-.3-.3-.2 0-.3.1-.3.3 0 .1.1.2.2.2h.2c.3.1.4.2.4.4s-.2.4-.5.4c-.4 0-.5-.2-.6-.5l.2-.1c0 .2.1.3.4.3.2 0 .3-.1.3-.2s-.1-.2-.2-.2h-.2c-.2 0-.4-.2-.4-.4s.2-.5.5-.5.5.2.5.4l-.2.2zm2 1.1v-1.1l-.6 1.1h-.2l-.5-1.1v1.1h-.2v-1.5h.3l.5 1.3.6-1.3h.3v1.5z"></path></symbol> <symbol viewBox="0 0 84.2 36" id="logo-premium-outlets"><path d="M3.8 33.2c0-.4-.3-.7-.8-.7H.7v1.3H3c.5 0 .8-.2.8-.6m.7 0c0 .8-.5 1.2-1.5 1.2H.7v1.5H0v-4h3.2c.8 0 1.3.5 1.3 1.3m5.3 0c0-.4-.3-.7-.8-.7H6.7v1.3H9c.5 0 .8-.2.8-.6m0 2.7l-1.1-1.5h-2v1.5H6v-4h3.1c.8 0 1.3.5 1.3 1.3 0 .7-.4 1.1-1 1.2l1.1 1.5h-.7zm2.5 0v-4h4v.6H13v1.1h2.3v.6H13v1.1h3.5v.6zm10.8 0v-3.2H23l-2 2.6-2.1-2.6v3.2h-.6v-4h.8l1.9 2.4 1.9-2.4h.8v4zm2.7-4h.7v4h-.7zm5 4.1c-1.4 0-2.3-.6-2.3-1.4v-2.7h.7v2.5c0 .6.5 1 1.6 1 1 0 1.6-.3 1.6-1v-2.5h.7v2.7c0 .8-.9 1.4-2.3 1.4m9.2-.1v-3.2h-.1l-2 2.6-2.1-2.6v3.2h-.6v-4h.8l1.9 2.4 1.9-2.4h.8v4zm8.8-3.1c-.3-.2-.8-.4-1.3-.4-1.1 0-1.9.6-1.9 1.5s.7 1.5 1.9 1.5c1.1 0 1.9-.6 1.9-1.5 0-.4-.2-.8-.6-1.1m.5 2.7c-.4.3-1.1.5-1.7.5-.7 0-1.3-.2-1.8-.5-.5-.4-.8-.9-.8-1.6 0-.6.3-1.2.8-1.6.4-.3 1.1-.5 1.7-.5.7 0 1.3.2 1.7.5.5.4.8.9.8 1.6.1.7-.2 1.2-.7 1.6m4.9.5c-1.4 0-2.3-.6-2.3-1.4v-2.7h.7v2.5c0 .6.5 1 1.6 1 1 0 1.6-.3 1.6-1v-2.5h.7v2.7c-.1.8-.9 1.4-2.3 1.4m6.2-3.5v3.4h-.6v-3.4h-1.9v-.6h4.4v.6zm3.4 3.4v-4h.7v3.4h3v.6zm5.2 0v-4h4v.6h-3.4v1.1H72v.6h-2.4v1.1h3.5v.6zm7.9-3.4v3.4h-.6v-3.4h-1.9v-.6h4.4v.6zm4.8-.1c-.8 0-1.3.2-1.3.5 0 .2.1.3.3.4.4.2 1.1.1 1.9.2 1 .1 1.5.5 1.5 1.1 0 .8-.8 1.3-2.2 1.3-1 0-1.8-.2-2.4-.7l.4-.5c.6.4 1.3.6 2 .6.9 0 1.4-.3 1.4-.7 0-.6-.7-.6-1.8-.6-1.2-.1-1.8-.3-1.8-1s.7-1.2 2-1.2c.9 0 1.6.2 2.2.6l-.4.4c-.6-.2-1.1-.4-1.8-.4M48.2 0L36 8.8l-4.7-3.4L36 2l3.4 2.4 1.3-1L36 0l-7.4 5.4 7.4 5.4L48.2 2l4.7 3.4-4.7 3.4-3.4-2.4-1.3 1 4.7 3.4 7.4-5.4zM20.1 18.6c-1.6-.8-3.1-1.2-4.7-1.2-1.1 0-1.9.1-2.5.4-.6.3-.9.6-.9 1 0 .5.3.8.9 1 .4.2 1.1.3 2.1.3 1.4.1 2.4.2 2.9.2 1.3.2 2.3.5 2.9 1 .6.5.9 1.1.9 2 0 1.1-.5 2-1.5 2.6-1 .6-2.4.9-4.2.9-2.7 0-4.7-.6-6.2-1.8l1-1.3c1.6 1 3.4 1.5 5.3 1.5 1.2 0 2.2-.2 2.8-.5.6-.3 1-.8 1-1.3 0-.7-.4-1.1-1.3-1.3-.4-.1-1.6-.2-3.6-.3-1.7-.1-2.9-.3-3.6-.7-.8-.4-1.2-1.1-1.2-2 0-1 .5-1.8 1.4-2.3.9-.6 2.2-.9 3.9-.9 2.3 0 4.1.5 5.7 1.5l-1.1 1.2zm4.2-2.5H26v10.5h-1.7zm19.4 10.5h-1.8v-8.5l-5.4 6.8-5.4-6.8H31v8.5h-1.7V16.1h2.2l5 6.4 5-6.4h2.2zm16.1-5.2c0 1.7-.7 3.1-2.1 4.2-1.2.9-2.8 1.4-4.6 1.4-1.9 0-3.4-.5-4.6-1.4-1.4-1.1-2.1-2.4-2.1-4.1 0-1.7.7-3.1 2.1-4.1 1.3-.9 2.8-1.4 4.6-1.4 1.8 0 3.3.5 4.6 1.4 1.4.9 2.1 2.3 2.1 4m-1.8 0c0-1.2-.5-2.2-1.6-3-.9-.7-2-1-3.3-1-1.5 0-2.6.4-3.6 1.1-.9.7-1.4 1.7-1.4 2.8 0 1.2.4 2.1 1.3 2.9.9.7 2.1 1.1 3.6 1.1s2.7-.4 3.6-1.1c.9-.7 1.4-1.7 1.4-2.8m14.6-5.3v8.6l-8-8.6h-2.1v10.5h1.7V18l8 8.6h2.2V16.1zM76.9 16.7c0-.1-.1-.3-.3-.3-.2 0-.3.1-.3.3 0 .1.1.2.2.2h.2c.3.1.4.2.4.4s-.2.4-.5.4c-.4 0-.5-.2-.6-.5l.2-.1c0 .2.1.3.4.3.2 0 .3-.1.3-.2s-.1-.2-.2-.2h-.2c-.2 0-.4-.2-.4-.4s.2-.5.5-.5.5.2.5.4l-.2.2zM78.8 17.8v-1.2l-.5 1.2h-.2l-.5-1.2v1.2h-.2v-1.6h.3l.5 1.3.6-1.3h.2v1.6z"></path></symbol> <symbol viewBox="0 0 578.8 359.2" id="logo-shopping"><path d="M560.6 142.7c-.7-.2-3.6-1-3.8-1-.9-.3-1.6-.8-1.6-1.7 0-1.3 1.4-1.7 2.5-1.7 1.6 0 2.8.6 2.8 2.3h2.3c0-2.8-2.3-4.2-5-4.2-2.4 0-4.8 1.2-4.8 3.9 0 1.4.6 2.7 2.9 3.4 1.8.5 3 .8 4 1.1.5.2 1.1.6 1.1 1.6s-.8 2-2.9 2c-1.8 0-3.4-.8-3.4-2.8h-2.3c.1 3.3 2.5 4.7 5.5 4.7 2.6 0 5.3-1.1 5.3-4.1 0-1.6-.9-3-2.6-3.5zm15-6.1l-3.6 10.3-3.6-10.3h-3.2v13.2h2.1v-10.2h.1l3.6 10.2h2l3.6-10.2v10.2h2.2v-13.2zM324.5 16.7l39.9 29.1-39.9 29L296 54.1l-11.4 8.4 39.9 29 62.9-45.7L324.5 0 221.6 74.8l-39.9-29 39.9-29.1L250 37.4l11.6-8.3-40-29.1-62.9 45.8 62.9 45.7zm-223.3 181c0-7.3-2.7-13-7.9-17-5.3-4-13.5-6.7-24.6-8.2-3.9-.5-12-1.1-24.2-2-8.3-.4-14.3-1.4-18-2.7-5.1-1.8-7.7-4.7-7.7-8.6 0-3.7 2.4-6.7 7.2-8.8 4.8-2.1 11.8-3.2 20.8-3.2 13.6 0 27 3.4 40.1 10l9-9.9c-12.9-8.7-28.9-13.1-48-13.1-14.2 0-25.2 2.4-33 7.2-7.8 4.8-11.7 11.4-11.7 19.7 0 8.1 3.4 13.8 10.2 17.3 5.9 2.9 16.1 4.9 30.7 5.9 16.5 1.1 26.6 2.1 30.3 3 7.2 1.9 10.8 5.6 10.8 11.2 0 4.8-2.8 8.6-8.2 11.4-5.7 2.8-13.7 4.3-24.1 4.3-16 0-30.9-4.2-44.8-12.8L0 212c12.5 9.9 30.1 14.9 52.7 14.9 15.6 0 27.5-2.6 35.8-7.7 8.5-4.9 12.7-12.2 12.7-21.5zm21.3-61.2h14.7V225h-14.7zm164 88.6v-88.6h-18.3l-42.6 53.6-42.5-53.6h-18.3v88.6h14.7v-72.5h.4l45.6 57.8 45.9-57.8h.4v72.5zm136.3-44.4c0-14.2-6-25.8-18-35-10.5-8-23.4-12-38.7-12-15.3 0-28.3 4-38.9 12-12.1 9.2-18.1 20.8-18.1 35 0 14.4 5.9 26.1 17.9 35.1 10.5 7.9 23.4 11.8 39.1 11.8 15.5 0 28.4-3.9 38.9-11.8 11.8-8.8 17.8-20.6 17.8-35.1zm-26.6 24.2c-7.6 6.2-17.6 9.3-30.2 9.3-12.7 0-22.7-3.1-30.3-9.2-7.6-6.2-11.4-14.3-11.4-24.3 0-9.7 3.9-17.7 11.6-24.1 7.7-6.3 17.8-9.5 30.1-9.5 11.2 0 20.6 2.7 28.3 8.3 8.8 6.4 13.2 14.8 13.2 25.2 0 10-3.7 18.1-11.3 24.3zm63.8-52.4l67.6 72.6h18.3v-88.6h-14.7v72.7l-67.6-72.7h-18.2v88.6H460zM118.1 290.2c0-2.9-1.1-5.1-3.1-6.7-2.1-1.5-5.3-2.6-9.6-3.1-1.7-.2-3.4-.4-5-.5-1.6-.1-3.1-.2-4.5-.2-1.4-.1-2.7-.2-3.8-.3-1.1-.1-2.2-.4-3.2-.8-2-.7-3-1.8-3-3.4 0-1.4.9-2.6 2.8-3.4 1.8-.9 4.6-1.3 8.2-1.3 2.8 0 5.4.3 7.9 1 2.6.6 5.1 1.6 7.7 3l3.5-3.9c-5.1-3.4-11.3-5.1-18.7-5.1-5.7 0-9.9.9-13 2.8-3 1.9-4.5 4.4-4.5 7.7 0 1.7.3 3 1 4.1.7 1.1 1.7 2 3 2.6 1.4.7 3 1.1 5 1.5 2 .3 4.4.6 7 .8 2.5.2 4.8.3 6.8.4 2 .2 3.6.4 5 .8s2.5.8 3.1 1.5c.7.7 1.1 1.6 1.1 2.9 0 1.9-1.1 3.3-3.2 4.5-2.1 1.1-5.3 1.7-9.4 1.7-3.2 0-6.2-.4-9-1.2s-5.7-2.1-8.5-3.7l-3.1 4.1c2.5 2 5.5 3.5 8.9 4.4 3.3.9 7.3 1.4 11.7 1.4 6.2 0 10.9-1 14.1-3 3.2-2.1 4.8-5 4.8-8.6zm14.8-23.9v34.6h5.7v-15.4h27.7v15.4h5.7v-34.6h-5.7v14.1h-27.7v-14.1zm99.1 17.2c0-5.6-2.4-10.1-7.1-13.7-1.9-1.5-4.2-2.6-6.8-3.4s-5.4-1.2-8.4-1.2-5.8.4-8.4 1.2c-2.6.8-4.9 2-6.8 3.4-4.7 3.6-7.1 8.1-7.1 13.7s2.3 10.2 6.9 13.7c1.9 1.5 4.2 2.6 6.8 3.4 2.6.8 5.4 1.2 8.5 1.2s5.8-.4 8.4-1.2c2.6-.9 4.9-1.9 6.8-3.4 4.8-3.5 7.2-8.1 7.2-13.7zm-7.1 5.3c-.8 1.6-1.8 3-3.3 4.1-1.4 1.1-3.1 2.1-5.1 2.7s-4.2 1-6.7 1-4.7-.3-6.7-1c-2-.6-3.7-1.5-5.1-2.7-1.4-1.1-2.5-2.5-3.3-4.1-.7-1.6-1.1-3.3-1.1-5.3 0-1.9.4-3.6 1.2-5.3.8-1.6 1.9-3 3.4-4.1 1.4-1.1 3.1-2.1 5.1-2.7 2-.7 4.2-1 6.7-1 2.2 0 4.2.3 6.1.8 1.9.6 3.5 1.4 4.9 2.4 3.4 2.5 5.2 5.8 5.2 9.8-.1 2-.5 3.8-1.3 5.4zm61.6-11.8c0-1.6-.3-3.1-.8-4.4-.5-1.4-1.3-2.5-2.3-3.4-1-.9-2.2-1.7-3.6-2.1-1.4-.5-3.1-.8-4.8-.8h-27.4v34.6h5.7v-13.2h20.6c4.1 0 7.3-.9 9.4-2.8 2.1-1.8 3.2-4.5 3.2-7.9zm-7.6 4.1c-1.2.9-2.8 1.4-5 1.4h-20.7v-11.1h20.3c4.7 0 7 1.9 7 5.7.1 1.7-.5 3.1-1.6 4zm25.6 6.5h20.6c4.1 0 7.3-.9 9.4-2.8 2.1-1.8 3.2-4.4 3.2-7.9 0-1.6-.3-3.1-.8-4.4-.5-1.4-1.3-2.4-2.3-3.4-1-.9-2.2-1.7-3.7-2.1-1.4-.5-3-.8-4.8-.8h-27.4v34.6h5.7l.1-13.2zm0-16.2h20.3c4.6 0 7 1.9 7 5.7 0 1.7-.5 3-1.7 4-1.1.9-2.8 1.4-5 1.4h-20.7v-11.1h.1zm45.6-5.2h5.7v34.6h-5.7zm28.4 6.2l26.5 28.5h7v-34.7h-5.7v28.5l-26.5-28.5h-7.1v34.7h5.8zm87.3 24.3c1.9-1.7 3.4-3.7 4.4-6 1.1-2.3 1.6-4.9 1.6-7.7v-.5h-23.3v5.2h16.1c-1.1 2.9-2.9 5.1-5.5 6.7-2.5 1.5-5.7 2.3-9.5 2.3-2.5 0-4.7-.3-6.7-1-2-.6-3.6-1.5-5.1-2.7-1.5-1.1-2.5-2.5-3.3-4.1-.8-1.6-1.1-3.4-1.1-5.3 0-4 1.7-7.3 5.2-9.8 1.4-1 3.1-1.8 5-2.4 1.9-.6 3.9-.9 6.1-.9 3 0 5.7.5 7.9 1.5s4.3 2.5 6 4.3l5.4-2.7c-2.5-2.9-5.3-5-8.3-6.3-3.1-1.4-6.5-2-10.4-2-3.1 0-6 .4-8.7 1.2-2.7.8-5 2-7 3.5-4.6 3.5-7 8.1-7 13.7 0 5.7 2.3 10.2 7 13.7 1.9 1.5 4.2 2.6 6.8 3.4 2.6.8 5.4 1.2 8.5 1.2 3.4 0 6.4-.5 9.1-1.4 2.5-1 4.9-2.3 6.8-3.9zM40.6 328.4c-1.7-1.5-3.7-2.8-6.2-3.6s-5.1-1.3-8.2-1.3H4.4v34.6h23c2.5 0 4.9-.4 7.1-1.1s4.1-1.9 5.8-3.4c1.8-1.6 3.2-3.4 4.2-5.6.9-2.1 1.4-4.3 1.4-6.8 0-2.7-.5-5.1-1.4-7.3-.9-2.1-2.2-4-3.9-5.5zm-1.8 17.5c-.6 1.5-1.4 2.7-2.5 3.8s-2.3 1.9-3.8 2.5c-1.4.6-3.1.9-4.7.9H10.1v-24.3h16.6c1.9 0 3.7.3 5.3.9 1.6.6 2.9 1.4 4 2.5s2 2.4 2.6 3.9.9 3.2.9 5c.2 1.8-.1 3.4-.7 4.8zm27.9-3H87v-5.2H66.7v-8.9h29.2v-5.2H61v34.6h36.3v-5.1H66.7zm76.1-2.1c-2.1-1.5-5.3-2.6-9.6-3.1-1.8-.2-3.4-.4-5.1-.5-1.6-.1-3.1-.2-4.5-.2-1.4-.1-2.7-.2-3.8-.3-1.1-.2-2.2-.4-3.2-.8-2-.7-3-1.8-3-3.4 0-1.5.9-2.6 2.8-3.4 1.8-.9 4.6-1.3 8.2-1.3 2.8 0 5.4.3 7.9 1 2.6.6 5.1 1.6 7.7 3l3.5-3.9c-5-3.4-11.3-5.1-18.7-5.1-5.7 0-9.9.9-13 2.8-3 1.9-4.5 4.4-4.5 7.7 0 1.7.3 3.1 1 4.1.7 1.1 1.7 2 3 2.6 1.4.7 3 1.1 4.9 1.5 2 .3 4.4.6 7 .8 2.5.2 4.8.3 6.8.5s3.6.4 5 .8 2.4.8 3.1 1.5c.7.7 1.1 1.6 1.1 2.9 0 1.9-1.1 3.4-3.2 4.5s-5.3 1.7-9.4 1.7c-3.2 0-6.2-.4-9-1.2s-5.7-2.1-8.5-3.8l-3.1 4.1c2.5 2 5.5 3.5 8.9 4.4 3.4.9 7.3 1.4 11.8 1.4 6.2 0 10.9-1 14.1-3 3.2-2 4.8-4.8 4.8-8.5.1-3-.9-5.2-3-6.8zm10-12h16.6v29.4h5.7v-29.4h16.5v-5.2h-38.8zm50.6-5.2h5.7v34.6h-5.7zm56.2 28.4l-26.4-28.4H226v34.6h5.7v-28.4l26.5 28.4h7.1v-34.6h-5.7zm36.3-28.4l-18.3 34.6h6.3l4-7.7h23.3l4.1 7.7h6.3l-18.3-34.6h-7.4zm-5.2 21.7l8.9-16.7 8.8 16.7h-17.7zm32.4-16.5h16.5v29.4h5.8v-29.4h16.5v-5.2h-38.8zm50.6-5.2h5.7v34.6h-5.7zm57.9 3.6c-1.9-1.4-4.2-2.6-6.8-3.4-2.6-.9-5.4-1.2-8.4-1.2s-5.8.4-8.4 1.2-4.9 2-6.8 3.4c-4.7 3.6-7.1 8.1-7.1 13.7 0 5.7 2.3 10.2 7 13.8 1.9 1.4 4.2 2.6 6.8 3.3 2.6.9 5.4 1.2 8.5 1.2s5.8-.4 8.4-1.2 4.9-1.9 6.8-3.3c4.7-3.5 7-8.1 7-13.8.1-5.6-2.3-10.1-7-13.7zm-.1 19c-.8 1.6-1.8 3-3.3 4.1-1.4 1.2-3.1 2.1-5.1 2.7-2 .6-4.2 1-6.7 1s-4.8-.3-6.7-1c-2-.6-3.8-1.5-5.1-2.7-1.4-1.1-2.5-2.5-3.3-4.1s-1.1-3.4-1.1-5.4c0-1.9.4-3.6 1.2-5.3.8-1.6 1.9-3 3.4-4.1 1.4-1.1 3.1-2.1 5.1-2.7 2-.7 4.2-1 6.7-1 2.2 0 4.2.3 6.1.9 1.9.6 3.5 1.4 4.9 2.4 3.4 2.5 5.2 5.8 5.2 9.8-.2 2-.6 3.8-1.3 5.4zm56.2 5.8l-26.4-28.4h-7.2v34.6h5.8v-28.4l26.4 28.4h7.1v-34.6h-5.7zm55.8-11.2c-2.1-1.5-5.3-2.6-9.6-3.1-1.7-.2-3.4-.4-5-.5s-3.1-.2-4.5-.2c-1.4-.1-2.7-.2-3.8-.3-1.1-.2-2.2-.4-3.2-.8-2-.7-3-1.8-3-3.4 0-1.5.9-2.6 2.8-3.4 1.8-.9 4.6-1.3 8.2-1.3 2.8 0 5.5.3 7.9 1 2.6.6 5.1 1.6 7.7 3l3.5-3.9c-5-3.4-11.3-5.1-18.7-5.1-5.7 0-9.9.9-13 2.8-3 1.9-4.5 4.4-4.5 7.7 0 1.7.3 3.1 1 4.1.7 1.1 1.7 2 3 2.6 1.4.7 3 1.1 5 1.5 2 .3 4.4.6 7 .8 2.5.2 4.8.3 6.8.5s3.6.4 5 .8 2.5.8 3.1 1.5c.7.7 1.1 1.6 1.1 2.9 0 1.9-1.1 3.4-3.2 4.5s-5.3 1.7-9.4 1.7c-3.2 0-6.2-.4-9-1.2s-5.6-2.1-8.5-3.8l-3.1 4.1c2.5 2 5.5 3.5 8.8 4.4 3.4.9 7.4 1.4 11.8 1.4 6.2 0 10.9-1 14.1-3 3.2-2 4.8-4.8 4.8-8.5.1-3-1-5.2-3.1-6.8z"></path></symbol> <symbol viewBox="0 0 90.5 35.6" id="logo-simon"><path d="M86.7 22.7c0 .3.2.4.5.4s.4-.2.4-.3c0-.2-.1-.2-.2-.3-.1-.1-.3-.1-.6-.2-.4-.1-.5-.3-.5-.5 0-.4.4-.6.8-.6s.8.2.8.7h-.4c0-.3-.2-.4-.4-.4s-.4.1-.4.3c0 .1.1.2.2.3 0 0 .5.1.6.2.3.1.4.3.4.5 0 .5-.4.6-.8.6-.5 0-.9-.2-.9-.7h.5zm1.6-1.3h.5l.6 1.6.6-1.6h.5v2.1h-.3v-1.6l-.6 1.6h-.3l-.6-1.6v1.6h-.3l-.1-2.1zM50.7 0L34.6 11.7l-6.2-4.5 6.2-4.6 4.5 3.3 1.8-1.4L34.6 0l-9.8 7.2 9.8 7.1L50.7 2.6 57 7.2l-6.3 4.5-4.4-3.2-1.8 1.3 6.2 4.5 9.8-7.1z"></path><path d="M50.7 0L34.6 11.7l-6.2-4.5 6.2-4.6 4.5 3.3 1.8-1.4L34.6 0l-9.8 7.2 9.8 7.1L50.7 2.6 57 7.2l-6.3 4.5-4.4-3.2-1.8 1.3 6.2 4.5 9.8-7.1zM13.6 24.6c-2.1-1-4.1-1.6-6.3-1.6-1.4 0-2.5.2-3.3.5-.8.3-1.1.8-1.1 1.4 0 .6.4 1.1 1.2 1.3.6.2 1.5.3 2.8.4 1.9.1 3.2.2 3.8.3 1.7.2 3 .7 3.8 1.3.8.6 1.2 1.5 1.2 2.7 0 1.5-.6 2.6-2 3.4-1.3.8-3.2 1.2-5.6 1.2-3.5 0-6.3-.8-8.2-2.3l1.3-1.7c2.2 1.3 4.5 2 7 2 1.6 0 2.9-.2 3.8-.7.9-.4 1.3-1 1.3-1.8 0-.9-.6-1.5-1.7-1.8-.6 0-2.1-.2-4.7-.4-2.3-.2-3.9-.5-4.8-.9C1 27.4.5 26.5.5 25.2c0-1.3.6-2.3 1.8-3.1 1.2-.7 2.9-1.1 5.2-1.1 3 0 5.5.7 7.5 2l-1.4 1.6zm5.5-3.2h2.3v13.8h-2.3zm25.7 13.8h-2.3V23.9h-.1l-7.2 9-7.1-9H28v11.3h-2.3V21.4h2.9l6.6 8.3 6.7-8.3h2.9zm18.9-6.9c0-1.6-.7-2.9-2.1-3.9-1.2-.9-2.6-1.4-4.4-1.4-1.9 0-3.5.5-4.7 1.5-1.2 1-1.8 2.2-1.8 3.8 0 1.6.6 2.8 1.8 3.8 1.2 1 2.8 1.4 4.7 1.4 2 0 3.5-.5 4.7-1.5 1.2-.9 1.8-2.2 1.8-3.7m2.4 0c0 2.3-.9 4.1-2.8 5.5-1.6 1.2-3.7 1.8-6.1 1.8-2.4 0-4.5-.6-6.1-1.9-1.9-1.4-2.8-3.2-2.8-5.5 0-2.2.9-4 2.8-5.5 1.7-1.3 3.7-1.9 6.1-1.9 2.4 0 4.4.6 6.1 1.9 1.8 1.5 2.8 3.3 2.8 5.6M83 21.4v11.3L72.5 21.4h-2.9v13.8h2.3V23.8l10.6 11.4h2.8V21.4z"></path></symbol> </svg>
</div>
<!--End SVGs-->
<header class="navbar navbar-dark navbar-fixed-top "> <div class="container"> <button class="navbar-toggle hamburger hamburger--squeeze collapsed" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <a class="navbar-brand" href="#"> <svg class="navbar-logo" viewBox="0 0 100 40" width="100" height="40" preserveAspectRatio="xMinYMin meet"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo-simon"></use> </svg> </a> <ul class="nav navbar-nav pull-sm-right navbar-sidepanel"> <li class="nav-item hidden-lg-up"> <div class="nav-link-group clearfix"> <a class="nav-link pull-xs-left" href="#">VIP CLUB</a> <div class="pull-xs-right"> <a class="nav-link pull-xs-left" href="#">LOGIN</a><span class="nav-link-spacer pull-xs-left">|</span><a class="nav-link pull-xs-left" href="#">REGISTER</a> </div> </div> </li> <li class="nav-item hidden-lg-up"> <a class="nav-link" href="#"> FIND ANOTHER CENTER <svg class="icon-search pull-xs-right"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use> </svg> </a> </li> <li class="nav-item hidden-lg-up"> <a class="nav-link nav-link-secondary" href="#"> Press Releases <svg class="icon-pagination pull-xs-right"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-pagination-right"></use> </svg> </a> </li> <li class="nav-item hidden-lg-up"> <a class="nav-link nav-link-secondary" href="#">Sustainability</a> </li> <li class="nav-item hidden-lg-up"> <a class="nav-link nav-link-secondary" href="#">Stocks</a> </li> <li class="nav-item hidden-lg-up"> <a class="nav-link nav-link-secondary" href="#">Financials</a> </li> <li class="nav-item"> <a class="nav-link" href="#">SHOPPERS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">BUSINESS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">INVESTORS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">CAREERS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">CONTACT</a> </li> <li role="separator" class="navbar-divider hidden-lg-down"></li> <li class="nav-item hidden-lg-down"> <div class="dropdown"> <a class="nav-link dropdown-toggle js-on-hover" href="http://www.premiumoutlets.com/vip"> VIP CLUB <span class="dropdown-toggle-border"></span> </a> <div class="dropdown-menu dropdown-menu-right"> <h5 class="dropdown-item">SHOP ONLINE</h5> <p class="dropdown-item"> Exceptional brands.<br> Extraordinary savings. Anytime. </p> <div class="dropdown-divider"></div> <h6 class="dropdown-item">A LINK LIST HEADER</h6> <ul class="dropdown-item list-unstyled"> <li><a class="dropdown-link" href="#">Action</a></li> <li><a class="dropdown-link" href="#">Action</a></li> <li><a class="dropdown-link" href="#">Action</a></li> <li><a class="dropdown-link" href="#">Action</a></li> </ul> <div class="dropdown-divider"></div> <div class="dropdown-item"> <a href="#" class="btn btn-primary">BUTTON INSIDE DD</a> </div> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Logout</a> <a class="dropdown-item" href="#">Create an Account</a> </div> </div> </li> </ul> <div class="navbar-sidepanel-mask"></div> </div>
</header>
<section class="dropdowns container"> <div class="row"> <div class="col-xs-12"> <h4>Dropdowns</h4> <div class="row"> <div class="col-sm-6"> <div class="dropdown"> <a href="#" class="btn btn-primary dropdown-toggle js-on-hover">HOVER TO OPEN</a> <div class="dropdown-menu"> <h5 class="dropdown-item">SHOP ONLINE</h5> <p class="dropdown-item"> Exceptional brands.<br> Extraordinary savings. Anytime. </p> <div class="dropdown-divider"></div> <h6 class="dropdown-item">A LINK LIST HEADER</h6> <ul class="dropdown-item list-unstyled"> <li><a class="nav-link" href="#">Action</a></li> <li><a class="nav-link" href="#">Action</a></li> <li><a class="nav-link" href="#">Action</a></li> <li><a class="nav-link" href="#">Action</a></li> </ul> <div class="dropdown-divider"></div> <div class="dropdown-item"> <a href="#" class="btn btn-primary">BUTTON INSIDE DD</a> </div> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Logout</a> <a class="dropdown-item" href="#">Create an Account</a> </div> </div> </div> <div class="col-sm-6"> <div class="dropdown"> <a href="#" class="btn btn-primary dropdown-toggle">CLICK TO OPEN</a> <div class="dropdown-menu"> <h5 class="dropdown-item">VIP SHOPPERS CLUB</h5> <p class="dropdown-item"> Join the VIP Shoppers Club for free access<br>to exclusive deals and coupons online. </p> <div class="dropdown-item"> <a href="#" class="btn btn-primary">JOIN NOW</a> </div> <div class="dropdown-divider"></div> <h5 class="dropdown-item">ALREADY A MEMBER?</h5> <div class="dropdown-item"> <form action="https://devpremiumoutlets.simon-ops.com/vip/" enctype="multipart /form-data" id="login" method="post"> <div class="form-group"> <label for="email" class="floating">EMAIL ADDRESS</label> <input type="email" class="form-control" placeholder="EMAIL ADDRESS" id="email" required="" autocomplete="off" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAUBJREFUOBGVVE2ORUAQLvIS4gwzEysHkHgnkMiEc4zEJXCMNwtWTmDh3UGcYoaFhZUFCzFVnu4wIaiE+vvq6+6qTgthGH6O4/jA7x1OiCAIPwj7CoLgSXDxSjEVzAt9k01CBKdWfsFf/2WNuEwc2YqigKZpK9glAlVVwTTNbQJZlnlCkiTAZnF/mePB2biRdhwHdF2HJEmgaRrwPA+qqoI4jle5/8XkXzrCFoHg+/5ICdpm13UTho7Q9/0WnsfwiL/ouHwHrJgQR8WEwVG+oXpMPaDAkdzvd7AsC8qyhCiKJjiRnCKwbRsMw9hcQ5zv9maSBeu6hjRNYRgGFuKaCNwjkjzPoSiK1d1gDDecQobOBwswzabD/D3Np7AHOIrvNpHmPI+Kc2RZBm3bcp8wuwSIot7QQ0PznoR6wYSK0Xb/AGVLcWwc7Ng3AAAAAElFTkSuQmCC&quot;); background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; background-repeat: no-repeat;"> </div> <div class="form-group"> <label for="password" class="floating">PASSWORD</label> <input type="password" class="form-control" placeholder="PASSWORD" id="password" name="password" required="" maxlength="15" autocomplete="off" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAUBJREFUOBGVVE2ORUAQLvIS4gwzEysHkHgnkMiEc4zEJXCMNwtWTmDh3UGcYoaFhZUFCzFVnu4wIaiE+vvq6+6qTgthGH6O4/jA7x1OiCAIPwj7CoLgSXDxSjEVzAt9k01CBKdWfsFf/2WNuEwc2YqigKZpK9glAlVVwTTNbQJZlnlCkiTAZnF/mePB2biRdhwHdF2HJEmgaRrwPA+qqoI4jle5/8XkXzrCFoHg+/5ICdpm13UTho7Q9/0WnsfwiL/ouHwHrJgQR8WEwVG+oXpMPaDAkdzvd7AsC8qyhCiKJjiRnCKwbRsMw9hcQ5zv9maSBeu6hjRNYRgGFuKaCNwjkjzPoSiK1d1gDDecQobOBwswzabD/D3Np7AHOIrvNpHmPI+Kc2RZBm3bcp8wuwSIot7QQ0PznoR6wYSK0Xb/AGVLcWwc7Ng3AAAAAElFTkSuQmCC&quot;); background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; background-repeat: no-repeat;"> </div> <div class="checkbox"> <label> <input type="checkbox"> <span class="c-indicator"></span> Stay Logged In </label> </div> <div class="form-group"> <a class="pull-right forgot-password" href="http://devpremiumoutlets.simon-ops.com/vip/forgot-password"><small>Forgot Password?</small></a> </div> <input type="submit" id="submit" name="submit" value="LOGIN" class="btn btn-primary"> </form> </div> </div> </div> </div> </div> </div> </div>
</section> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mobile Nav and Dropdown Animations - Script Codes CSS Codes

.dropdowns { margin-top: 8rem;
}
.dropdown-menu { display: block !important; overflow: hidden; max-height: 0; padding: 0; opacity: 0; -webkit-transition: opacity .75s ease, max-height .5s ease; -moz-transition: opacity .75s ease, max-height .5s ease; -o-transition: opacity .75s ease, max-height .5s ease; transition: opacity .75s ease, max-height .5s ease;
}
.dropdown-menu.open { max-height: 999px; opacity: 1; -webkit-transition: opacity .5s ease, max-height .75s ease; -moz-transition: opacity .5s ease, max-height .75s ease; -o-transition: opacity .5s ease, max-height .75s ease; transition: opacity .5s ease, max-height .75s ease;
}
.dropdown-item:first-child { padding-top: 17.452px; padding-top: 1.01rem;
}
.dropdown-item:last-child { padding-bottom: 17.452px; padding-bottom: 1.01rem;
}

Mobile Nav and Dropdown Animations - Script Codes JS Codes

"use strict";
/*
Mobile Nav and Dropdown Animations
By: Alex Sperellis
Description:
Slide in and down animations for the mobile nav on hamburger click and dropdowns on hover or click depending on the classes set to the toggle.
*/
var dropdownInit = function dropdownInit() { $('.dropdown-toggle').each(function () { var $dropdownToggle = $(this); var $dropdownMenu = $dropdownToggle.next(); var hideDropdown = function hideDropdown() { $dropdownToggle.removeClass("open").next().removeClass("open"); }; var showDropdown = function showDropdown() { $dropdownToggle.addClass("open").next().addClass("open"); }; if ($dropdownToggle.hasClass('js-on-hover')) { $dropdownToggle.hover(showDropdown); $dropdownMenu.mouseenter(showDropdown); $dropdownToggle.mouseleave(hideDropdown); $dropdownMenu.mouseleave(hideDropdown); } else { $dropdownToggle.click(function (e) { e.preventDefault(); $dropdownToggle.toggleClass("open").next().toggleClass("open"); }); } });
};
dropdownInit();
// Mobile Nav Fucntion to handle opening and hamburger animation
(function () { function hasClass(elem, className) { return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' '); } function toggleClass(elem, className) { var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' '; if (hasClass(elem, className)) { while (newClass.indexOf(' ' + className + ' ') >= 0) { newClass = newClass.replace(' ' + className + ' ', ' '); } elem.className = newClass.replace(/^\s+|\s+$/g, ''); } else { elem.className += ' ' + className; } } function mobileNavToggle() { toggleClass(body, 'sidepanel-active'); toggleClass(hamburgerIcon, 'open'); toggleClass(hamburgerIcon, 'collapsed'); toggleClass(mobileNav, 'open'); } function closeNav() { body.classList.remove('sidepanel-active'); hamburgerIcon.classList.remove('open'); hamburgerIcon.classList.add('collapsed'); mobileNav.classList.remove('open'); } var body = document.querySelector('body'); var hamburgerIcon = document.querySelector('.navbar-toggle'); var mobileNav = document.querySelector('.navbar-sidepanel'); var mask = document.querySelector('.navbar-sidepanel-mask'); var navLinks = document.querySelectorAll('.navbar-sidepanel .nav-link'); for (var i = 0; i < navLinks.length; i++) { navLinks[i].onclick = closeNav; } hamburgerIcon.onclick = mobileNavToggle; mask.onclick = mobileNavToggle;
})();
Mobile Nav and Dropdown Animations - Script Codes
Mobile Nav and Dropdown Animations - Script Codes
Home Page Home
Developer Alex Sperellis
Username asperellis
Uploaded September 16, 2022
Rating 3
Size 13,779 Kb
Views 26,312
Do you need developer help for Mobile Nav and Dropdown Animations?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Sperellis (asperellis) Script Codes
Name
Map infobox
Tribute page
Mobile Navigation
Wiki viewer
Landing Page Html
Checkbox dropdown
Simon logo animation
A Pen by Alex Sperellis
Responsive Modal
Weather generator
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!