<nav class="a-main-menu" aria-label="Huvudmeny">
    <ul class="a-main-menu__list">
        <li class="u-hidden-mobile">
            <a href="#" class="a-main-menu__list__link">
                <span class="a-main-menu__list__text">Kunskap</span>
            </a>

        </li>
        <li class="u-hidden-mobile">
            <a href="#" class="a-main-menu__list__link">
                <span class="a-main-menu__list__text">Innovation</span>
            </a>

        </li>
        <li class="u-hidden-mobile">
            <a href="#" class="a-main-menu__list__link is-current">
                <span class="a-main-menu__list__text">Domäner</span>
            </a>

        </li>
        <li class="u-hidden-mobile">
            <button type="button" class="a-main-menu__list__link" aria-expanded="false" data-a11y-toggle="dropdown">
                <span class="a-main-menu__list__text">Ämnen</span>
                <div class="icon-arrow-down"></div>
            </button>

            <ul id="dropdown" class="a-main-menu__subnav u-box-shadow-card">
                <li class="a-main-menu__subnav__item">
                    <a href="#">Desinformation</a>
                </li>
                <li class="a-main-menu__subnav__item">
                    <a href="#">Föräldraskap</a>
                </li>
                <li class="a-main-menu__subnav__item">
                    <a href="#">Integritet</a>
                </li>
                <li class="a-main-menu__subnav__item">
                    <a href="#">Källkritik</a>
                </li>
                <li class="a-main-menu__subnav__item">
                    <a href="#">Ordlista</a>
                </li>
                <li class="a-main-menu__subnav__item">
                    <a href="#">Så funkar internet</a>
                </li>
                <li class="a-main-menu__subnav__item">
                    <a href="#">Sökkritik</a>
                </li>
                <li class="a-main-menu__subnav__item">
                    <a href="#">Vanliga IT-brott</a>
                </li>
                <li class="a-main-menu__subnav__item">
                    <a href="#">Yttrandefrihet</a>
                </li>
            </ul>
        </li>
        <li>
            <span class="a-main-menu__list__button">
                <a href="#" class="a-button a-button--small a-button--lemon">
                    <span class="a-button__text">Bli medlem</span>
                </a>
            </span>
            <span class="a-main-menu__list__button">
                <a href="/medlem/rhedman" class="a-button a-button--icon a-button--icon-left a-button--transparent">
                    <span class="a-button__text u-nowrap">Min sida</span>
                    <svg class="icon a-button__icon">
                        <use xlink:href="#icon-user"></use>
                    </svg>
                </a>
            </span>

        </li>
        <li>
            <div id="readspeaker_button1" class="rs_skip rsbtn rs_preserve">
                <a rel="nofollow" accesskey="L" class="rsbtn_play a-main-menu__list__link is-top-level" aria-describedby="readspeaker-info" href="//app-eu.readspeaker.com/cgi-bin/rsent?customerid=10645&amp;lang=<?php echo iis_set_language( 'sv_SE' ); ?>&amp;voice=Maja&amp;readclass=site__main&amp;url=<?php the_permalink(); ?>">
                    <span class="a-main-menu__list__text rsbtn_left rsimg rspart"><span class="rsbtn_text"><span class="u-nowrap">Lyssna</span></span></span>
                    <span class="rsbtn_right rsimg rsplay rspart"></span>
                    <div class="a-button a-button--standalone-icon a-button--icon u-p-0">
                        <svg class="icon a-button__icon ">
                            <use xlink:href="#icon-speaker"></use>
                        </svg>
                    </div>
                    <span class="u-visuallyhidden" id="readspeaker-info">Lyssna på sidans text med ReadSpeaker</span>
                </a>
            </div>

        </li>
        <li class="u-hidden-mobile">
            <button type="button" class="a-main-menu__list__link js-toggle-domain-search" aria-expanded="false" data-a11y-toggle="domain-search">
                <span class="a-main-menu__list__text">Sök ledig domän</span>
                <div class="icon-arrow-down"></div>
            </button>

        </li>
        <li>
            <button type="button" data-toggle-target="mega-menu-text" data-toggle-text="Meny|Stäng" class="a-main-menu__list__link js-toggle-mega-menu" aria-expanded="false" data-a11y-toggle="mega-menu">
                <span class="a-main-menu__list__text" id="mega-menu-text">Meny</span>
                <div class="icon-hamburger"></div>
            </button>

        </li>
    </ul>
</nav>
<nav class="a-main-menu" aria-label="Huvudmeny">
	<ul class="a-main-menu__list">
		{{#each item}}
		<li {{#if hide_mobile}}class="u-hidden-mobile"{{/if}}>
			{{#if is_button}}
				<span class="a-main-menu__list__button">
					<a href="{{url}}" class="a-button a-button--small a-button--lemon">
						<span class="a-button__text">{{text}}</span>
					</a>
				</span>
				<span class="a-main-menu__list__button">
					<a href="/medlem/rhedman" class="a-button a-button--icon a-button--icon-left a-button--transparent">
						<span class="a-button__text u-nowrap">Min sida</span>
						<svg class="icon a-button__icon">
							<use xlink:href="#icon-user"></use>
						</svg>
					</a>
				</span>
			{{else has_readspeaker}}
			<div id="readspeaker_button1" class="rs_skip rsbtn rs_preserve">
				<a rel="nofollow" accesskey="L" class="rsbtn_play a-main-menu__list__link is-top-level" aria-describedby="readspeaker-info" href="//app-eu.readspeaker.com/cgi-bin/rsent?customerid=10645&amp;lang=<?php echo iis_set_language( 'sv_SE' ); ?>&amp;voice=Maja&amp;readclass=site__main&amp;url=<?php the_permalink(); ?>">
					<span class="a-main-menu__list__text rsbtn_left rsimg rspart"><span class="rsbtn_text"><span class="u-nowrap">Lyssna</span></span></span>
					<span class="rsbtn_right rsimg rsplay rspart"></span>
					<div class="a-button a-button--standalone-icon a-button--icon u-p-0">
						<svg class="icon a-button__icon ">
							<use xlink:href="#icon-speaker"></use>
						</svg>
					</div>
					<span class="u-visuallyhidden" id="readspeaker-info">Lyssna på sidans text med ReadSpeaker</span>
				</a>
			</div>
			{{else}}
			<{{#if url}}a href="{{url}}"{{else}}button type="button"{{#if toggle_text}} data-toggle-target="{{id}}" data-toggle-text="{{data_toggle_text}}"{{/if}}{{/if}} class="a-main-menu__list__link{{#if is_current}} is-current{{/if}}{{#if extra_class}} {{extra_class}}{{/if}}" {{#if has_expandable}}aria-expanded="false" data-a11y-toggle="{{controls}}"{{/if}}>
				<span class="a-main-menu__list__text"{{#if has_id}} id="{{id}}"{{/if}}>{{text}}</span>
				{{#if icon}}
				<div class="{{icon}}"></div>
				{{/if}}
				{{#if url}}</a>{{else}}</button>{{/if}}
			{{/if}}

			{{#if has_dropdown}}
				<ul id="dropdown" class="a-main-menu__subnav u-box-shadow-card">
					<li class="a-main-menu__subnav__item">
						<a href="#">Desinformation</a>
					</li>
					<li class="a-main-menu__subnav__item">
						<a href="#">Föräldraskap</a>
					</li>
					<li class="a-main-menu__subnav__item">
						<a href="#">Integritet</a>
					</li>
					<li class="a-main-menu__subnav__item">
						<a href="#">Källkritik</a>
					</li>
					<li class="a-main-menu__subnav__item">
						<a href="#">Ordlista</a>
					</li>
					<li class="a-main-menu__subnav__item">
						<a href="#">Så funkar internet</a>
					</li>
					<li class="a-main-menu__subnav__item">
						<a href="#">Sökkritik</a>
					</li>
					<li class="a-main-menu__subnav__item">
						<a href="#">Vanliga IT-brott</a>
					</li>
					<li class="a-main-menu__subnav__item">
						<a href="#">Yttrandefrihet</a>
					</li>
				</ul>
			{{/if}}
		</li>
		{{/each}}
</ul>
</nav>
{
  "item": [
    {
      "text": "Kunskap",
      "url": "#",
      "is_current": false,
      "icon": false,
      "hide_mobile": true
    },
    {
      "text": "Innovation",
      "url": "#",
      "is_current": false,
      "icon": false,
      "hide_mobile": true
    },
    {
      "text": "Domäner",
      "url": "#",
      "is_current": true,
      "icon": false,
      "hide_mobile": true
    },
    {
      "text": "Ämnen",
      "url": false,
      "is_current": false,
      "icon": "icon-arrow-down",
      "hide_mobile": true,
      "has_dropdown": true,
      "has_expandable": true,
      "controls": "dropdown"
    },
    {
      "text": "Bli medlem",
      "url": "#",
      "is_current": false,
      "icon": false,
      "hide_mobile": false,
      "is_button": true
    },
    {
      "text": "Lyssna",
      "url": false,
      "is_current": false,
      "icon": false,
      "has_readspeaker": true,
      "hide_mobile": false
    },
    {
      "text": "Sök ledig domän",
      "url": false,
      "is_current": false,
      "icon": "icon-arrow-down",
      "extra_class": "js-toggle-domain-search",
      "has_expandable": true,
      "controls": "domain-search",
      "hide_mobile": true
    },
    {
      "text": "Meny",
      "url": false,
      "is_current": false,
      "icon": "icon-hamburger",
      "extra_class": "js-toggle-mega-menu",
      "has_expandable": true,
      "controls": "mega-menu",
      "hide_mobile": false,
      "has_id": true,
      "id": "mega-menu-text",
      "toggle_text": true,
      "data_toggle_text": "Meny|Stäng"
    }
  ]
}
  • Content:
    @charset 'UTF-8';
    
    @include atom(main-menu) {
    
    	@include e(list) {
    		$root: &;
    
    		display: flex;
    		justify-content: flex-end;
    		width: 100%;
    		margin: 0;
    		padding: 0;
    		list-style: none;
    
    		li {
    			display: flex;
    			align-items: center;
    			position: relative;
    
    			&:last-child {
    				#{$root}#{$element-separator}link {
    					padding-right: 0;
    				}
    			}
    		}
    
    		@include e(button) {
    			padding: rhythm(2) 0 rhythm(2) rhythm(1);
    
    			@include atom(button) {
    				padding: rhythm(0.4) rhythm(1.5);
    				font-family: $font-family-medium;
    				font-size: $size-small;
    
    				@include e(text) {
    					overflow: hidden;
    					text-overflow: ellipsis;
    					white-space: nowrap;
    				}
    
    				@include m(icon-left) {
    					padding-left: rhythm(5);
    				}
    
    				@include m(icon-right) {
    					padding-right: rhythm(5);
    				}
    			}
    
    			@include bp-up(sm) {
    				@include atom(button) {
    					padding-top: rhythm(0.6);
    					padding-bottom: rhythm(0.6);
    					font-size: $size-base;
    				}
    			}
    		}
    
    		@include e(link) {
    			@extend %normalize-links;
    
    			display: flex;
    			align-items: center;
    			padding: rhythm(2) rhythm(1);
    			border: 0;
    			background-color: transparent;
    			color: var(--cyberspace-color);
    			font-family: $font-family-medium;
    			font-size: rem($size-small);
    			text-decoration: none;
    			-webkit-appearance: none;
    			line-height: 1;
    
    			&:focus,
    			&:hover {
    				text-decoration: underline;
    			}
    
    			&.is-current {
    				color: $color-ruby;
    				font-family: $font-family-medium;
    			}
    
    			&[aria-expanded='true'] {
    
    				@include b(icon-hamburger) {
    					transform: rotate(-90deg);
    					background-color: transparent;
    
    					&::before {
    						top: 0;
    						transform: rotate(45deg);
    					}
    
    					&::after {
    						bottom: 0;
    						transform: rotate(-45deg);
    					}
    				}
    
    				@include b(icon-arrow-down) {
    					&::before {
    						left: 0;
    						width: 100%;
    						transform: rotate(-45deg);
    					}
    
    					&::after {
    						right: 0;
    						width: 100%;
    						transform: rotate(45deg);
    					}
    				}
    			}
    
    			@include b(icon-hamburger) {
    				display: flex;
    				position: relative;
    				z-index: -1;
    				flex-direction: column;
    				width: $icon-size-medium;
    				height: 2px;
    				margin-left: rhythm(1);
    				transform-origin: 50% 50%;
    				transition: all 0.3s ease-out, background-color 0.15s ease-out;
    				border: 0;
    				border-radius: 0;
    				background-color: currentColor;
    				color: var(--cyberspace-color);
    
    				&::before,
    				&::after {
    					content: '';
    					display: block;
    					position: absolute;
    					width: 100%;
    					height: 2px;
    					transition: transform 0.3s ease-out, top 0.3s ease-out, bottom 0.3s ease-out;
    					background-color: currentColor;
    				}
    
    				&::before {
    					top: -#{rem(6px)};
    				}
    
    				&::after {
    					bottom: -#{rem(6px)};
    				}
    			}
    
    			@include b(icon-arrow-down) {
    				display: flex;
    				position: relative;
    				z-index: -1;
    				flex-direction: column;
    				width: $icon-size-medium;
    				height: $icon-size-medium;
    				margin-left: rhythm(1);
    				margin-top: -#{rem(3px)};
    				transform-origin: 50% 50%;
    				transition: all 0.3s ease-out;
    				border: 0;
    				border-radius: 0;
    				color: var(--cyberspace-color);
    
    				&::before,
    				&::after {
    					content: '';
    					display: block;
    					position: absolute;
    					top: 50%;
    					width: 75%;
    					height: 2px;
    					transition: all 0.3s ease-out;
    					background-color: currentColor;
    				}
    
    				&::before {
    					left: -#{rem(2px)};
    					transform: rotate(45deg);
    				}
    
    				&::after {
    					right: -#{rem(2px)};
    					transform: rotate(-45deg);
    				}
    			}
    
    			@include bp-up(sm) {
    				font-size: $size-base;
    			}
    		}
    
    		@include e(text) {
    			margin-top: -#{rem(3px)}; // Adjust for the font's bad placement in viewbox
    			pointer-events: none;
    		}
    	}
    
    	@include e(subnav) {
    		position: absolute;
    		left: 0;
    		top: calc(100% - #{rhythm(1)});
    		margin: 0;
    		padding: 0;
    		background-color: $color-snow;
    		border: 1px solid $color-ash;
    
    		@include card-shadow($color-cyberspace, 0.2);
    
    		&::after,
    		&:before {
    			bottom: 100%;
    			left: rhythm(4);
    			border: solid transparent;
    			content: '';
    			height: 0;
    			width: 0;
    			position: absolute;
    			pointer-events: none;
    		}
    
    		&::after {
    			border-color: rgba(255, 255, 255, 0);
    			border-bottom-color: $color-snow;
    			border-width: 15px;
    			margin-left: -15px;
    		}
    		&::before {
    			border-color: rgba(238, 238, 238, 0);
    			border-bottom-color: $color-ash;
    			border-width: 16px;
    			margin-left: -16px;
    		}
    
    		&[aria-hidden='true'],
    		&:not([aria-hidden]) {
    			display: none;
    		}
    
    		@include e(item) {
    			width: 100%;
    
    			& + & {
    				border-top: 1px solid $color-ash;
    			}
    
    			a {
    				color: $color-cyberspace;
    				display: block;
    				width: 100%;
    				padding: rhythm(0.5) rhythm(2);
    				text-decoration: none;
    				white-space: nowrap;
    
    				&:hover {
    					text-decoration: underline;
    				}
    			}
    		}
    	}
    }
    
    .no-js {
    	@include atom(main-menu) {
    		@include e(subnav) {
    			display: block;
    		}
    	}
    }
    
  • URL: /components/raw/main-menu/_main-menu.scss
  • Filesystem Path: src/atoms/main-menu/_main-menu.scss
  • Size: 4.9 KB

No notes defined.