styleguide 0.30.11

40 - Custom submenus

This is our custom submenus for bigger editorial pieces thar requires a simple design to indicate that the articles are part of a series

40.1 - Custom submenu: Election

Election submenu under article image..

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dagbladet.no" title="Forsiden">
        <svg width="100%" height="100%" viewBox="0 0 383 100">
            <path d="M119.292,66.2955c-1.06389,0 -1.89599,-0.29143 -2.47279,-0.868953c-0.792575,-0.792092 -1.1942,-2.15317 -1.1942,-4.04586c0,-23.2931 -0.00106816,-23.3037 -0.00106816,-23.3176c-0.10468,-3.04133 0.399492,-5.29698 1.41959,-6.35061c0.490286,-0.509202 1.08312,-0.745121 1.86394,-0.745121c1.18459,0 2.07437,0.313848 2.72061,0.958623c0.960277,0.960758 1.42813,2.69439 1.42813,5.30125l0,22.9045c0,4.37892 -1.09059,6.1638 -3.7642,6.1638M98.2469,83.9916c0.43581,14.0698 10.0952,16.0084 20.4681,16.0084c7.48994,0 13.1362,-1.84572 16.7797,-5.48807c3.02183,-3.01998 4.55464,-7.21636 4.55464,-12.4696l0,-63.7346l-15.9348,0l0,4.5604c-2.6672,-3.86545 -6.5019,-5.91827 -11.4272,-6.09655c-4.94345,-0.00106751 -8.68522,2.17985 -11.1431,6.48298c-1.8789,3.28793 -2.91394,7.84086 -2.91394,12.8187l0,26.6536c0,5.80085 1.80626,10.9324 4.95413,14.0794c2.44716,2.44566 5.59716,3.68504 9.36136,3.68504c3.5997,0 7.02636,-1.6066 10.2063,-4.76856l0,8.91584c-0.0790439,2.82783 -0.889778,3.30501 -3.84004,3.57189c-1.67381,0.108886 -2.75586,-0.0832657 -3.29741,-0.5914c-0.643033,-0.601008 -0.775485,-1.89483 -0.775485,-3.65302l-16.9923,0.0256202Z"/>
            <path d="M170.02,61.2802c0.00427264,2.4083 0.0117498,5.70584 -1.51252,7.23238c-0.576807,0.577523 -1.34481,0.858277 -2.34782,0.858277c-0.73169,0.0181477 -1.30422,-0.203894 -1.81481,-0.702421c-1.29995,-1.26393 -2.04446,-4.3074 -2.04446,-8.34472l0,-20.6947c0,-2.54067 0.181587,-6.10082 1.75712,-7.67646c0.600306,-0.598873 1.3822,-0.889235 2.39054,-0.889235c0.879096,0 1.53388,0.245527 2.06155,0.772877c1.51038,1.50946 1.51038,4.88706 1.51038,7.12029l0,22.3238ZM173.084,16.7714c-4.70739,0 -8.39681,1.4817 -10.7831,4.30206l0,-21.0235l-16.9934,0l0,81.7862l15.9348,0l0,-4.31914c2.70458,3.63914 6.89177,5.86917 11.519,6.04958c9.47031,-0.323455 14.2525,-7.33699 14.2525,-20.8399l0,-26.6525c0,-4.00209 -0.667601,-11.3818 -5.13785,-15.8504c-2.29334,-2.29087 -5.25001,-3.45233 -8.79203,-3.45233"/>
            <path d="M237.081,70.6203c-1.46231,0 -2.67361,-0.439814 -3.5057,-1.26927c-0.860938,-0.86148 -1.31597,-2.12114 -1.31597,-3.64554l0,-3.82702c0,-3.53452 1.70799,-5.18062 3.19487,-6.22251c1.12157,-0.839062 2.5262,-1.47957 4.15194,-2.22042c0.729554,-0.333063 1.45804,-0.674666 2.19934,-1.03762l0,10.9057c-0.09293,3.32956 -0.988049,7.31671 -4.72448,7.31671M237.371,16.7709c-7.78583,0 -13.5902,1.95034 -17.2508,5.79764c-3.12651,3.28259 -4.56318,7.87395 -4.27585,13.6438l0.0405901,0.809172l16.9806,0l0.00427264,-1.3472c0.270245,-4.37359 0.431537,-7.0146 4.98083,-7.0146c1.03078,0 1.93337,0.358683 2.61059,1.03655c0.855597,0.85294 1.34481,2.198 1.34481,3.68718l0,2.89188c0,4.09283 -3.82508,5.20838 -9.12209,6.75093c-1.15682,0.3384 -2.35529,0.687476 -3.56552,1.08993c-6.89605,2.26525 -13.948,6.30151 -13.948,19.0679l0,5.11657c0,4.57961 1.4559,8.45574 4.20855,11.2067c2.65865,2.6549 6.35128,4.05974 10.6827,4.05974c5.68048,0 8.96828,-1.91404 12.318,-5.25748l-0.0053408,3.52705l16.4048,0l0.0213632,-47.7806c0,-5.77523 -1.27645,-9.73995 -4.01629,-12.4781c-3.28246,-3.27939 -8.81446,-4.80699 -17.4132,-4.80699"/>
            <path d="M72.2807,70.6203c-1.46124,0 -2.67361,-0.439814 -3.50464,-1.26927c-0.860938,-0.86148 -1.31704,-2.12114 -1.31704,-3.64554l0,-3.82702c0,-3.53452 1.70692,-5.18169 3.19487,-6.22251c1.1205,-0.839062 2.5262,-1.47957 4.15301,-2.22042c0.729554,-0.333063 1.45804,-0.674666 2.19828,-1.03762l0,10.9057c-0.0918618,3.32956 -0.986981,7.31671 -4.72448,7.31671M72.5691,16.7709c-7.78476,0 -13.5891,1.95034 -17.2497,5.79658c-3.12651,3.28366 -4.56425,7.87502 -4.27585,13.6449l0.0405901,0.809172l16.9816,0l0.00320448,-1.3472c0.270245,-4.37359 0.431537,-7.0146 4.98083,-7.0146c1.03078,0 1.93337,0.358683 2.61165,1.03655c0.854529,0.85294 1.34375,2.198 1.34375,3.68718l0,2.89188c0,4.09283 -3.82508,5.20731 -9.12103,6.75093c-1.1643,0.339468 -2.3617,0.689611 -3.56552,1.08993c-6.89712,2.26419 -13.9491,6.30151 -13.9491,19.0679l0,5.11657c0,4.57961 1.4559,8.45574 4.20855,11.2067c2.65865,2.6549 6.35342,4.05974 10.6827,4.05974c5.68262,0 8.97042,-1.91618 12.3212,-5.25962l-0.00213632,3.52919l16.3984,0l0.0213632,-47.7806c0,-5.77523 -1.27645,-9.73995 -4.01629,-12.4781c-3.28139,-3.27939 -8.81553,-4.80699 -17.4142,-4.80699"/>
            <path d="M280.469,39.2503c-0.00427264,-2.33571 -0.0117498,-5.8649 1.55311,-7.43093c0.570398,-0.57432 1.32559,-0.851872 2.30616,-0.851872c0.680419,-0.0170801 1.20595,0.183612 1.66633,0.631965c0.869483,0.846535 1.9056,3.02746 1.9056,8.60733l0,20.6937c0,6.25347 -1.00941,8.47069 -3.85927,8.47069c-0.889778,0 -1.55097,-0.247662 -2.08185,-0.777147c-1.49008,-1.48811 -1.49008,-4.81767 -1.49008,-7.02101l0,-21.9437l0,-0.378966ZM288.43,0.0492122l-0.529808,0l0,21.7484c-2.84451,-3.33383 -6.36624,-5.0269 -10.4947,-5.0269c-12.9247,0 -13.9288,14.7754 -13.9288,19.3027l0,26.6536c0,13.5029 4.77254,20.5143 14.1873,20.8399c4.3143,0 8.42565,-2.29194 11.2937,-6.20436l0,4.47393l15.937,0l0,-0.528417l0,-80.7304l0,-0.528417l-0.529808,0l-15.9348,0Z"/>
            <path d="M335.532,44.0322l-8.87214,0l0,-9.11226c0,-2.51078 0.50524,-4.28925 1.50397,-5.28737c0.708191,-0.708826 1.72722,-1.06751 3.02824,-1.06751c1.19527,0 2.18225,0.380033 2.93103,1.12836c1.04039,1.03975 1.4089,2.5332 1.4089,3.49716l0,10.8416ZM331.088,16.7712c-6.5788,0.0533755 -11.707,1.48384 -15.2437,4.25296c-4.10174,3.21214 -6.17931,8.27533 -6.17931,15.0497l0,29.9202c0,5.00128 1.52961,9.05461 4.54289,12.0394c4.69884,4.65434 11.7818,5.5788 16.8951,5.53397c7.34681,-0.105683 12.8521,-2.06777 16.3632,-5.83287c3.34334,-3.58363 4.85052,-8.7792 4.48094,-15.4394l-0.0437946,-0.804902l-16.9122,0c0,0 0.00427264,1.90764 -0.0181587,2.4478c-0.101475,2.55668 -0.19761,4.95111 -1.4527,6.09548c-0.649442,0.593535 -1.6172,0.84867 -2.95881,0.780349c-3.39675,-0.194287 -3.90199,-3.10218 -3.90199,-4.8198l0,-10.167l25.8655,0l0,-22.6365c0,-4.48567 -1.41104,-8.16004 -4.19787,-10.9185c-4.67748,-4.63299 -11.9559,-5.54891 -17.239,-5.50088"/>
            <path d="M375.691,18.3082l0,-11.3711l-16.9934,0l0,11.3711l-4.23526,0l0,12.7546l4.23526,0l0,38.2948c0,4.19745 1.14827,7.47257 3.41171,9.73462c2.33393,2.33144 5.77448,3.51424 10.2298,3.51424c3.50357,0 6.84478,-0.420599 9.93283,-0.87429l0.728486,-0.106751l0,-12.3479l-0.928232,-0.0117426c-0.977367,-0.0138776 -2.54863,-0.0234852 -3.92122,0.199624c-0.913278,-0.00640506 -1.4794,-0.165464 -1.83083,-0.516674c-0.418719,-0.415261 -0.629147,-1.21696 -0.629147,-2.37734l0,-35.5086l7.30943,0l0,-12.7546l-7.30943,0Z"/>
            <path d="M28.1685,54.5102c0,5.59375 0.173042,9.14428 -1.75285,10.9975c-1.35443,1.3045 -3.81013,1.82971 -7.69824,1.6493l0,-52.4574c7.2464,0.200692 9.36457,0.758999 9.45109,8.26679l0,31.5438ZM38.1291,3.48008c-5.5491,-3.21107 -12.9589,-3.48008 -19.4683,-3.48008l-18.6608,0l0,81.7894l23.084,0c4.99152,0 10.7318,-0.416329 15.4659,-3.50036c5.00647,-3.13954 7.49422,-8.46428 7.5989,-16.271l0,-40.022c0,-6.82565 -0.9528,-14.3612 -8.01975,-18.5159"/>
            <path d="M212.928,71.6701c-1.46124,0 -2.4995,-0.327725 -3.17351,-1.00026c-0.863074,-0.863615 -1.28286,-2.42752 -1.28286,-4.78458l0.00320448,-65.8845l-16.9357,0l-0.00106816,63.7591c0,7.41919 1.81481,12.2219 5.70932,15.1127c3.32091,2.46595 8.01121,3.51744 15.6806,3.51744l0,-10.7199Z"/>
        </svg>
      </a>
    </h1>
    <nav class="left show-for-medium-up">
      <ul class="sections">
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-section">Item 1</a>
          <ul id="drop-section" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
            <li><a href="#">Subitem 5</a></li>
            <li><a href="#">Subitem 6</a></li>
            <li><a href="#">Subitem 7</a></li>
            <li><a href="#">Subitem 8</a></li>
            <li><a href="#">Subitem 9</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-video">Item 2</a>
          <ul id="drop-video" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Item 3</a>
        </li>
        <li>
          <a href="#">Item 4</a>
        </li>
      </ul>
    </nav>
    <div class="right">
      <form id="search" name="search" method="get" class="search show-for-medium-up" action="http://www.dagbladet.no/tekstarkiv/">
        <input type="search" name="q" placeholder="Søk" class="radius" required>
      </form>
    </div>
    <a class="small-navigation-toggle  hide-for-medium-up" href="#">
      Meny
      <svg width="23px" height="23px" viewBox="0 0 23 23">
        <rect x="0" y="0" width="23" height="5"/>
        <rect x="0" y="9" width="23" height="5"/>
        <rect x="0" y="18" width="23" height="5"/>
      </svg>
    </a>
  </div>
</header>
<figure>
 <img src="/assets/placeholder/1400x700.png">
</figure>
<header id="secondary-navigation" class="top-nav" role="banner">
  <section class="secondary alternate election">
    <a> <img class="logo show-for-medium-up" src="https://graphics.dbstatic.no/Grafikk/valg19/valg19-large.svg"></a>
    <a> <img class="logo show-for-small-only" src="https://graphics.dbstatic.no/Grafikk/valg19/valg19-small.svg"></a>
    <nav>
      <ul>
        <li><a>Alt om valget</a></li>
        <li><a>Valgomat</a></li>
      </ul>
    </nav>
  </section>
</header>

40.2 - Custom submenu: Climate

Climate submenu under article image..

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dagbladet.no" title="Forsiden">
        <svg width="100%" height="100%" viewBox="0 0 383 100">
            <path d="M119.292,66.2955c-1.06389,0 -1.89599,-0.29143 -2.47279,-0.868953c-0.792575,-0.792092 -1.1942,-2.15317 -1.1942,-4.04586c0,-23.2931 -0.00106816,-23.3037 -0.00106816,-23.3176c-0.10468,-3.04133 0.399492,-5.29698 1.41959,-6.35061c0.490286,-0.509202 1.08312,-0.745121 1.86394,-0.745121c1.18459,0 2.07437,0.313848 2.72061,0.958623c0.960277,0.960758 1.42813,2.69439 1.42813,5.30125l0,22.9045c0,4.37892 -1.09059,6.1638 -3.7642,6.1638M98.2469,83.9916c0.43581,14.0698 10.0952,16.0084 20.4681,16.0084c7.48994,0 13.1362,-1.84572 16.7797,-5.48807c3.02183,-3.01998 4.55464,-7.21636 4.55464,-12.4696l0,-63.7346l-15.9348,0l0,4.5604c-2.6672,-3.86545 -6.5019,-5.91827 -11.4272,-6.09655c-4.94345,-0.00106751 -8.68522,2.17985 -11.1431,6.48298c-1.8789,3.28793 -2.91394,7.84086 -2.91394,12.8187l0,26.6536c0,5.80085 1.80626,10.9324 4.95413,14.0794c2.44716,2.44566 5.59716,3.68504 9.36136,3.68504c3.5997,0 7.02636,-1.6066 10.2063,-4.76856l0,8.91584c-0.0790439,2.82783 -0.889778,3.30501 -3.84004,3.57189c-1.67381,0.108886 -2.75586,-0.0832657 -3.29741,-0.5914c-0.643033,-0.601008 -0.775485,-1.89483 -0.775485,-3.65302l-16.9923,0.0256202Z"/>
            <path d="M170.02,61.2802c0.00427264,2.4083 0.0117498,5.70584 -1.51252,7.23238c-0.576807,0.577523 -1.34481,0.858277 -2.34782,0.858277c-0.73169,0.0181477 -1.30422,-0.203894 -1.81481,-0.702421c-1.29995,-1.26393 -2.04446,-4.3074 -2.04446,-8.34472l0,-20.6947c0,-2.54067 0.181587,-6.10082 1.75712,-7.67646c0.600306,-0.598873 1.3822,-0.889235 2.39054,-0.889235c0.879096,0 1.53388,0.245527 2.06155,0.772877c1.51038,1.50946 1.51038,4.88706 1.51038,7.12029l0,22.3238ZM173.084,16.7714c-4.70739,0 -8.39681,1.4817 -10.7831,4.30206l0,-21.0235l-16.9934,0l0,81.7862l15.9348,0l0,-4.31914c2.70458,3.63914 6.89177,5.86917 11.519,6.04958c9.47031,-0.323455 14.2525,-7.33699 14.2525,-20.8399l0,-26.6525c0,-4.00209 -0.667601,-11.3818 -5.13785,-15.8504c-2.29334,-2.29087 -5.25001,-3.45233 -8.79203,-3.45233"/>
            <path d="M237.081,70.6203c-1.46231,0 -2.67361,-0.439814 -3.5057,-1.26927c-0.860938,-0.86148 -1.31597,-2.12114 -1.31597,-3.64554l0,-3.82702c0,-3.53452 1.70799,-5.18062 3.19487,-6.22251c1.12157,-0.839062 2.5262,-1.47957 4.15194,-2.22042c0.729554,-0.333063 1.45804,-0.674666 2.19934,-1.03762l0,10.9057c-0.09293,3.32956 -0.988049,7.31671 -4.72448,7.31671M237.371,16.7709c-7.78583,0 -13.5902,1.95034 -17.2508,5.79764c-3.12651,3.28259 -4.56318,7.87395 -4.27585,13.6438l0.0405901,0.809172l16.9806,0l0.00427264,-1.3472c0.270245,-4.37359 0.431537,-7.0146 4.98083,-7.0146c1.03078,0 1.93337,0.358683 2.61059,1.03655c0.855597,0.85294 1.34481,2.198 1.34481,3.68718l0,2.89188c0,4.09283 -3.82508,5.20838 -9.12209,6.75093c-1.15682,0.3384 -2.35529,0.687476 -3.56552,1.08993c-6.89605,2.26525 -13.948,6.30151 -13.948,19.0679l0,5.11657c0,4.57961 1.4559,8.45574 4.20855,11.2067c2.65865,2.6549 6.35128,4.05974 10.6827,4.05974c5.68048,0 8.96828,-1.91404 12.318,-5.25748l-0.0053408,3.52705l16.4048,0l0.0213632,-47.7806c0,-5.77523 -1.27645,-9.73995 -4.01629,-12.4781c-3.28246,-3.27939 -8.81446,-4.80699 -17.4132,-4.80699"/>
            <path d="M72.2807,70.6203c-1.46124,0 -2.67361,-0.439814 -3.50464,-1.26927c-0.860938,-0.86148 -1.31704,-2.12114 -1.31704,-3.64554l0,-3.82702c0,-3.53452 1.70692,-5.18169 3.19487,-6.22251c1.1205,-0.839062 2.5262,-1.47957 4.15301,-2.22042c0.729554,-0.333063 1.45804,-0.674666 2.19828,-1.03762l0,10.9057c-0.0918618,3.32956 -0.986981,7.31671 -4.72448,7.31671M72.5691,16.7709c-7.78476,0 -13.5891,1.95034 -17.2497,5.79658c-3.12651,3.28366 -4.56425,7.87502 -4.27585,13.6449l0.0405901,0.809172l16.9816,0l0.00320448,-1.3472c0.270245,-4.37359 0.431537,-7.0146 4.98083,-7.0146c1.03078,0 1.93337,0.358683 2.61165,1.03655c0.854529,0.85294 1.34375,2.198 1.34375,3.68718l0,2.89188c0,4.09283 -3.82508,5.20731 -9.12103,6.75093c-1.1643,0.339468 -2.3617,0.689611 -3.56552,1.08993c-6.89712,2.26419 -13.9491,6.30151 -13.9491,19.0679l0,5.11657c0,4.57961 1.4559,8.45574 4.20855,11.2067c2.65865,2.6549 6.35342,4.05974 10.6827,4.05974c5.68262,0 8.97042,-1.91618 12.3212,-5.25962l-0.00213632,3.52919l16.3984,0l0.0213632,-47.7806c0,-5.77523 -1.27645,-9.73995 -4.01629,-12.4781c-3.28139,-3.27939 -8.81553,-4.80699 -17.4142,-4.80699"/>
            <path d="M280.469,39.2503c-0.00427264,-2.33571 -0.0117498,-5.8649 1.55311,-7.43093c0.570398,-0.57432 1.32559,-0.851872 2.30616,-0.851872c0.680419,-0.0170801 1.20595,0.183612 1.66633,0.631965c0.869483,0.846535 1.9056,3.02746 1.9056,8.60733l0,20.6937c0,6.25347 -1.00941,8.47069 -3.85927,8.47069c-0.889778,0 -1.55097,-0.247662 -2.08185,-0.777147c-1.49008,-1.48811 -1.49008,-4.81767 -1.49008,-7.02101l0,-21.9437l0,-0.378966ZM288.43,0.0492122l-0.529808,0l0,21.7484c-2.84451,-3.33383 -6.36624,-5.0269 -10.4947,-5.0269c-12.9247,0 -13.9288,14.7754 -13.9288,19.3027l0,26.6536c0,13.5029 4.77254,20.5143 14.1873,20.8399c4.3143,0 8.42565,-2.29194 11.2937,-6.20436l0,4.47393l15.937,0l0,-0.528417l0,-80.7304l0,-0.528417l-0.529808,0l-15.9348,0Z"/>
            <path d="M335.532,44.0322l-8.87214,0l0,-9.11226c0,-2.51078 0.50524,-4.28925 1.50397,-5.28737c0.708191,-0.708826 1.72722,-1.06751 3.02824,-1.06751c1.19527,0 2.18225,0.380033 2.93103,1.12836c1.04039,1.03975 1.4089,2.5332 1.4089,3.49716l0,10.8416ZM331.088,16.7712c-6.5788,0.0533755 -11.707,1.48384 -15.2437,4.25296c-4.10174,3.21214 -6.17931,8.27533 -6.17931,15.0497l0,29.9202c0,5.00128 1.52961,9.05461 4.54289,12.0394c4.69884,4.65434 11.7818,5.5788 16.8951,5.53397c7.34681,-0.105683 12.8521,-2.06777 16.3632,-5.83287c3.34334,-3.58363 4.85052,-8.7792 4.48094,-15.4394l-0.0437946,-0.804902l-16.9122,0c0,0 0.00427264,1.90764 -0.0181587,2.4478c-0.101475,2.55668 -0.19761,4.95111 -1.4527,6.09548c-0.649442,0.593535 -1.6172,0.84867 -2.95881,0.780349c-3.39675,-0.194287 -3.90199,-3.10218 -3.90199,-4.8198l0,-10.167l25.8655,0l0,-22.6365c0,-4.48567 -1.41104,-8.16004 -4.19787,-10.9185c-4.67748,-4.63299 -11.9559,-5.54891 -17.239,-5.50088"/>
            <path d="M375.691,18.3082l0,-11.3711l-16.9934,0l0,11.3711l-4.23526,0l0,12.7546l4.23526,0l0,38.2948c0,4.19745 1.14827,7.47257 3.41171,9.73462c2.33393,2.33144 5.77448,3.51424 10.2298,3.51424c3.50357,0 6.84478,-0.420599 9.93283,-0.87429l0.728486,-0.106751l0,-12.3479l-0.928232,-0.0117426c-0.977367,-0.0138776 -2.54863,-0.0234852 -3.92122,0.199624c-0.913278,-0.00640506 -1.4794,-0.165464 -1.83083,-0.516674c-0.418719,-0.415261 -0.629147,-1.21696 -0.629147,-2.37734l0,-35.5086l7.30943,0l0,-12.7546l-7.30943,0Z"/>
            <path d="M28.1685,54.5102c0,5.59375 0.173042,9.14428 -1.75285,10.9975c-1.35443,1.3045 -3.81013,1.82971 -7.69824,1.6493l0,-52.4574c7.2464,0.200692 9.36457,0.758999 9.45109,8.26679l0,31.5438ZM38.1291,3.48008c-5.5491,-3.21107 -12.9589,-3.48008 -19.4683,-3.48008l-18.6608,0l0,81.7894l23.084,0c4.99152,0 10.7318,-0.416329 15.4659,-3.50036c5.00647,-3.13954 7.49422,-8.46428 7.5989,-16.271l0,-40.022c0,-6.82565 -0.9528,-14.3612 -8.01975,-18.5159"/>
            <path d="M212.928,71.6701c-1.46124,0 -2.4995,-0.327725 -3.17351,-1.00026c-0.863074,-0.863615 -1.28286,-2.42752 -1.28286,-4.78458l0.00320448,-65.8845l-16.9357,0l-0.00106816,63.7591c0,7.41919 1.81481,12.2219 5.70932,15.1127c3.32091,2.46595 8.01121,3.51744 15.6806,3.51744l0,-10.7199Z"/>
        </svg>
      </a>
    </h1>
    <nav class="left show-for-medium-up">
      <ul class="sections">
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-section">Item 1</a>
          <ul id="drop-section" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
            <li><a href="#">Subitem 5</a></li>
            <li><a href="#">Subitem 6</a></li>
            <li><a href="#">Subitem 7</a></li>
            <li><a href="#">Subitem 8</a></li>
            <li><a href="#">Subitem 9</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-video">Item 2</a>
          <ul id="drop-video" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Item 3</a>
        </li>
        <li>
          <a href="#">Item 4</a>
        </li>
      </ul>
    </nav>
    <div class="right">
      <form id="search" name="search" method="get" class="search show-for-medium-up" action="http://www.dagbladet.no/tekstarkiv/">
        <input type="search" name="q" placeholder="Søk" class="radius" required>
      </form>
    </div>
    <a class="small-navigation-toggle  hide-for-medium-up" href="#">
      Meny
      <svg width="23px" height="23px" viewBox="0 0 23 23">
        <rect x="0" y="0" width="23" height="5"/>
        <rect x="0" y="9" width="23" height="5"/>
        <rect x="0" y="18" width="23" height="5"/>
      </svg>
    </a>
  </div>
</header>
<figure>
 <img src="/assets/placeholder/1400x700.png">
</figure>
<header id="secondary-navigation" class="top-nav" role="banner">
  <section class="secondary alternate climate">
    <a href="#">
      <img class="logo" src="/assets/navigation-secondary/klima.svg">
    </a>
  </section>
</header>

40.3 - Custom submenu: Statsbudsjettet

Statsbudsjettet submenu under article image..

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dagbladet.no" title="Forsiden">
        <svg width="100%" height="100%" viewBox="0 0 383 100">
            <path d="M119.292,66.2955c-1.06389,0 -1.89599,-0.29143 -2.47279,-0.868953c-0.792575,-0.792092 -1.1942,-2.15317 -1.1942,-4.04586c0,-23.2931 -0.00106816,-23.3037 -0.00106816,-23.3176c-0.10468,-3.04133 0.399492,-5.29698 1.41959,-6.35061c0.490286,-0.509202 1.08312,-0.745121 1.86394,-0.745121c1.18459,0 2.07437,0.313848 2.72061,0.958623c0.960277,0.960758 1.42813,2.69439 1.42813,5.30125l0,22.9045c0,4.37892 -1.09059,6.1638 -3.7642,6.1638M98.2469,83.9916c0.43581,14.0698 10.0952,16.0084 20.4681,16.0084c7.48994,0 13.1362,-1.84572 16.7797,-5.48807c3.02183,-3.01998 4.55464,-7.21636 4.55464,-12.4696l0,-63.7346l-15.9348,0l0,4.5604c-2.6672,-3.86545 -6.5019,-5.91827 -11.4272,-6.09655c-4.94345,-0.00106751 -8.68522,2.17985 -11.1431,6.48298c-1.8789,3.28793 -2.91394,7.84086 -2.91394,12.8187l0,26.6536c0,5.80085 1.80626,10.9324 4.95413,14.0794c2.44716,2.44566 5.59716,3.68504 9.36136,3.68504c3.5997,0 7.02636,-1.6066 10.2063,-4.76856l0,8.91584c-0.0790439,2.82783 -0.889778,3.30501 -3.84004,3.57189c-1.67381,0.108886 -2.75586,-0.0832657 -3.29741,-0.5914c-0.643033,-0.601008 -0.775485,-1.89483 -0.775485,-3.65302l-16.9923,0.0256202Z"/>
            <path d="M170.02,61.2802c0.00427264,2.4083 0.0117498,5.70584 -1.51252,7.23238c-0.576807,0.577523 -1.34481,0.858277 -2.34782,0.858277c-0.73169,0.0181477 -1.30422,-0.203894 -1.81481,-0.702421c-1.29995,-1.26393 -2.04446,-4.3074 -2.04446,-8.34472l0,-20.6947c0,-2.54067 0.181587,-6.10082 1.75712,-7.67646c0.600306,-0.598873 1.3822,-0.889235 2.39054,-0.889235c0.879096,0 1.53388,0.245527 2.06155,0.772877c1.51038,1.50946 1.51038,4.88706 1.51038,7.12029l0,22.3238ZM173.084,16.7714c-4.70739,0 -8.39681,1.4817 -10.7831,4.30206l0,-21.0235l-16.9934,0l0,81.7862l15.9348,0l0,-4.31914c2.70458,3.63914 6.89177,5.86917 11.519,6.04958c9.47031,-0.323455 14.2525,-7.33699 14.2525,-20.8399l0,-26.6525c0,-4.00209 -0.667601,-11.3818 -5.13785,-15.8504c-2.29334,-2.29087 -5.25001,-3.45233 -8.79203,-3.45233"/>
            <path d="M237.081,70.6203c-1.46231,0 -2.67361,-0.439814 -3.5057,-1.26927c-0.860938,-0.86148 -1.31597,-2.12114 -1.31597,-3.64554l0,-3.82702c0,-3.53452 1.70799,-5.18062 3.19487,-6.22251c1.12157,-0.839062 2.5262,-1.47957 4.15194,-2.22042c0.729554,-0.333063 1.45804,-0.674666 2.19934,-1.03762l0,10.9057c-0.09293,3.32956 -0.988049,7.31671 -4.72448,7.31671M237.371,16.7709c-7.78583,0 -13.5902,1.95034 -17.2508,5.79764c-3.12651,3.28259 -4.56318,7.87395 -4.27585,13.6438l0.0405901,0.809172l16.9806,0l0.00427264,-1.3472c0.270245,-4.37359 0.431537,-7.0146 4.98083,-7.0146c1.03078,0 1.93337,0.358683 2.61059,1.03655c0.855597,0.85294 1.34481,2.198 1.34481,3.68718l0,2.89188c0,4.09283 -3.82508,5.20838 -9.12209,6.75093c-1.15682,0.3384 -2.35529,0.687476 -3.56552,1.08993c-6.89605,2.26525 -13.948,6.30151 -13.948,19.0679l0,5.11657c0,4.57961 1.4559,8.45574 4.20855,11.2067c2.65865,2.6549 6.35128,4.05974 10.6827,4.05974c5.68048,0 8.96828,-1.91404 12.318,-5.25748l-0.0053408,3.52705l16.4048,0l0.0213632,-47.7806c0,-5.77523 -1.27645,-9.73995 -4.01629,-12.4781c-3.28246,-3.27939 -8.81446,-4.80699 -17.4132,-4.80699"/>
            <path d="M72.2807,70.6203c-1.46124,0 -2.67361,-0.439814 -3.50464,-1.26927c-0.860938,-0.86148 -1.31704,-2.12114 -1.31704,-3.64554l0,-3.82702c0,-3.53452 1.70692,-5.18169 3.19487,-6.22251c1.1205,-0.839062 2.5262,-1.47957 4.15301,-2.22042c0.729554,-0.333063 1.45804,-0.674666 2.19828,-1.03762l0,10.9057c-0.0918618,3.32956 -0.986981,7.31671 -4.72448,7.31671M72.5691,16.7709c-7.78476,0 -13.5891,1.95034 -17.2497,5.79658c-3.12651,3.28366 -4.56425,7.87502 -4.27585,13.6449l0.0405901,0.809172l16.9816,0l0.00320448,-1.3472c0.270245,-4.37359 0.431537,-7.0146 4.98083,-7.0146c1.03078,0 1.93337,0.358683 2.61165,1.03655c0.854529,0.85294 1.34375,2.198 1.34375,3.68718l0,2.89188c0,4.09283 -3.82508,5.20731 -9.12103,6.75093c-1.1643,0.339468 -2.3617,0.689611 -3.56552,1.08993c-6.89712,2.26419 -13.9491,6.30151 -13.9491,19.0679l0,5.11657c0,4.57961 1.4559,8.45574 4.20855,11.2067c2.65865,2.6549 6.35342,4.05974 10.6827,4.05974c5.68262,0 8.97042,-1.91618 12.3212,-5.25962l-0.00213632,3.52919l16.3984,0l0.0213632,-47.7806c0,-5.77523 -1.27645,-9.73995 -4.01629,-12.4781c-3.28139,-3.27939 -8.81553,-4.80699 -17.4142,-4.80699"/>
            <path d="M280.469,39.2503c-0.00427264,-2.33571 -0.0117498,-5.8649 1.55311,-7.43093c0.570398,-0.57432 1.32559,-0.851872 2.30616,-0.851872c0.680419,-0.0170801 1.20595,0.183612 1.66633,0.631965c0.869483,0.846535 1.9056,3.02746 1.9056,8.60733l0,20.6937c0,6.25347 -1.00941,8.47069 -3.85927,8.47069c-0.889778,0 -1.55097,-0.247662 -2.08185,-0.777147c-1.49008,-1.48811 -1.49008,-4.81767 -1.49008,-7.02101l0,-21.9437l0,-0.378966ZM288.43,0.0492122l-0.529808,0l0,21.7484c-2.84451,-3.33383 -6.36624,-5.0269 -10.4947,-5.0269c-12.9247,0 -13.9288,14.7754 -13.9288,19.3027l0,26.6536c0,13.5029 4.77254,20.5143 14.1873,20.8399c4.3143,0 8.42565,-2.29194 11.2937,-6.20436l0,4.47393l15.937,0l0,-0.528417l0,-80.7304l0,-0.528417l-0.529808,0l-15.9348,0Z"/>
            <path d="M335.532,44.0322l-8.87214,0l0,-9.11226c0,-2.51078 0.50524,-4.28925 1.50397,-5.28737c0.708191,-0.708826 1.72722,-1.06751 3.02824,-1.06751c1.19527,0 2.18225,0.380033 2.93103,1.12836c1.04039,1.03975 1.4089,2.5332 1.4089,3.49716l0,10.8416ZM331.088,16.7712c-6.5788,0.0533755 -11.707,1.48384 -15.2437,4.25296c-4.10174,3.21214 -6.17931,8.27533 -6.17931,15.0497l0,29.9202c0,5.00128 1.52961,9.05461 4.54289,12.0394c4.69884,4.65434 11.7818,5.5788 16.8951,5.53397c7.34681,-0.105683 12.8521,-2.06777 16.3632,-5.83287c3.34334,-3.58363 4.85052,-8.7792 4.48094,-15.4394l-0.0437946,-0.804902l-16.9122,0c0,0 0.00427264,1.90764 -0.0181587,2.4478c-0.101475,2.55668 -0.19761,4.95111 -1.4527,6.09548c-0.649442,0.593535 -1.6172,0.84867 -2.95881,0.780349c-3.39675,-0.194287 -3.90199,-3.10218 -3.90199,-4.8198l0,-10.167l25.8655,0l0,-22.6365c0,-4.48567 -1.41104,-8.16004 -4.19787,-10.9185c-4.67748,-4.63299 -11.9559,-5.54891 -17.239,-5.50088"/>
            <path d="M375.691,18.3082l0,-11.3711l-16.9934,0l0,11.3711l-4.23526,0l0,12.7546l4.23526,0l0,38.2948c0,4.19745 1.14827,7.47257 3.41171,9.73462c2.33393,2.33144 5.77448,3.51424 10.2298,3.51424c3.50357,0 6.84478,-0.420599 9.93283,-0.87429l0.728486,-0.106751l0,-12.3479l-0.928232,-0.0117426c-0.977367,-0.0138776 -2.54863,-0.0234852 -3.92122,0.199624c-0.913278,-0.00640506 -1.4794,-0.165464 -1.83083,-0.516674c-0.418719,-0.415261 -0.629147,-1.21696 -0.629147,-2.37734l0,-35.5086l7.30943,0l0,-12.7546l-7.30943,0Z"/>
            <path d="M28.1685,54.5102c0,5.59375 0.173042,9.14428 -1.75285,10.9975c-1.35443,1.3045 -3.81013,1.82971 -7.69824,1.6493l0,-52.4574c7.2464,0.200692 9.36457,0.758999 9.45109,8.26679l0,31.5438ZM38.1291,3.48008c-5.5491,-3.21107 -12.9589,-3.48008 -19.4683,-3.48008l-18.6608,0l0,81.7894l23.084,0c4.99152,0 10.7318,-0.416329 15.4659,-3.50036c5.00647,-3.13954 7.49422,-8.46428 7.5989,-16.271l0,-40.022c0,-6.82565 -0.9528,-14.3612 -8.01975,-18.5159"/>
            <path d="M212.928,71.6701c-1.46124,0 -2.4995,-0.327725 -3.17351,-1.00026c-0.863074,-0.863615 -1.28286,-2.42752 -1.28286,-4.78458l0.00320448,-65.8845l-16.9357,0l-0.00106816,63.7591c0,7.41919 1.81481,12.2219 5.70932,15.1127c3.32091,2.46595 8.01121,3.51744 15.6806,3.51744l0,-10.7199Z"/>
        </svg>
      </a>
    </h1>
    <nav class="left show-for-medium-up">
      <ul class="sections">
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-section">Item 1</a>
          <ul id="drop-section" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
            <li><a href="#">Subitem 5</a></li>
            <li><a href="#">Subitem 6</a></li>
            <li><a href="#">Subitem 7</a></li>
            <li><a href="#">Subitem 8</a></li>
            <li><a href="#">Subitem 9</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-video">Item 2</a>
          <ul id="drop-video" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Item 3</a>
        </li>
        <li>
          <a href="#">Item 4</a>
        </li>
      </ul>
    </nav>
    <div class="right">
      <form id="search" name="search" method="get" class="search show-for-medium-up" action="http://www.dagbladet.no/tekstarkiv/">
        <input type="search" name="q" placeholder="Søk" class="radius" required>
      </form>
    </div>
    <a class="small-navigation-toggle  hide-for-medium-up" href="#">
      Meny
      <svg width="23px" height="23px" viewBox="0 0 23 23">
        <rect x="0" y="0" width="23" height="5"/>
        <rect x="0" y="9" width="23" height="5"/>
        <rect x="0" y="18" width="23" height="5"/>
      </svg>
    </a>
  </div>
</header>
<figure>
 <img src="/assets/placeholder/1400x700.png">
</figure>
<header id="top-navigation" class="top-nav" role="banner">
  <div class="statsbudsjettet">
      <img class="logo" src="https://graphics.dbstatic.no/Grafikk/statsbudsjett2019/statsbudsjettet.svg">
     <div class="flex-item">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="0" width="6" height="7" fill="#d60000">
 <animateTransform  attributeType="xml"
   attributeName="transform" type="scale"
   values="1,1; 1,3; 1,1"
   begin="0s" dur="4.7s" repeatCount="indefinite" />       
</rect>
<rect x="10" y="0" width="6" height="7" fill="#d60000">
 <animateTransform  attributeType="xml"
   attributeName="transform" type="scale"
   values="1,1; 1,3; 1,1"
   begin="0.2s" dur="4.5s" repeatCount="indefinite" />       
</rect>
<rect x="20" y="0" width="6" height="7" fill="#d60000">
 <animateTransform  attributeType="xml"
   attributeName="transform" type="scale"
   values="1,1; 1,3; 1,1"
   begin="0.4s" dur="5s" repeatCount="indefinite" />       
</rect>
</svg>
    </div>
  </div>
<div class="bottom-link">
<div class="flex-item"><a href="#" class="color-red">Dette betyr statsbudsjettet for deg</a></div>
</div>
</header>