Skip to content
Snippets Groups Projects
Commit 57553e54 authored by Eric Bremner's avatar Eric Bremner
Browse files

ISTWCMS-3380: adding horiztonal navigation (not completed)

parent 4d34d8d6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 449 additions and 7 deletions
source/_patterns/03-layouts/navigation/_navigation.scss 0 → 100644
+ 171
− 0
View file @ 57553e54
.has-submenu:hover {
.menu__subnav {
display: block;
}
}
.uw-main-nav {
background-color: #000;
display: block;
width: 100%;
.menu--main .menu__subnav .menu__link:hover {
background-color: $uw-black;
color: $uw-gold;
}
&__wrapper {
display: grid;
grid-template-columns: 24px auto 30px;
margin-left: auto;
margin-right: auto;
max-width: 63rem;
}
&__home {
background: url('../../source/images/icons/home.png') 0 50% no-repeat;
grid-column: 1 / 2;
}
&__links {
grid-template-columns: 2 / 3;
padding: 0 1rem;
a {
color: $uw-white;
&:hover {
color: $uw-gold;
}
}
.menu--main {
display: flex;
flex-wrap: nowrap;
> .menu__item {
> .menu__link {
padding: 1rem 0;
}
}
.menu__item {
flex: 1;
text-align: center;
}
.menu__link {
padding: 1rem 0;
}
.menu__subnav {
background-color: $uw-black;
position: inherit;
&--outside-wrapper {
background-color: transparent;
left: 0;
position: fixed;
width: 100%
}
&--inside-wrapper {
background-color: $uw-black;
margin-left: auto;
margin-right: auto;
max-width: 63rem;
}
.menu__subnav:hover {
display: block;
}
.menu__link {
text-align: left;
width: 100%;
}
.has-children {
.menu__subnav li {
padding-left: 1.5rem;
}
}
}
}
.has-submenu > .menu__subnav {
background: transparent;
margin: 0 -1000em; /* trick from css-tricks comments */
padding: 0 1000em; /* trick from css-tricks comments */
z-index: 10000;
}
.has-submenu {
> a::after {
border: solid $uw-white;
border-width: 0 3px 3px 0;
content: '';
display: inline-block;
padding: 3px;
-webkit-transform: rotate(45deg) translateY(-5px);
transform: rotate(45deg) translateY(-5px);
}
}
}
&__more {
background: url('../../source/images/icons/dots.png') 0 50% no-repeat;
background-position: center;
grid-column: 3 / 4;
position: relative;
&:hover {
.menu--main-more {
display: block;
}
}
.menu--main-more {
background: transparent;
display: none;
margin: 0 -1000em; /* trick from css-tricks comments */
padding: 0 1000em; /* trick from css-tricks comments */
z-index: 10000;
}
.menu__subnav {
&--outside-wrapper {
background-color: transparent;
left: 0;
position: fixed;
width: 100%;
z-index: 10000;
}
&--inside-wrapper {
background-color: $uw-black;
margin-left: auto;
margin-right: auto;
margin-top: 3rem;
max-width: 63rem;
padding: 1rem;
li {
padding: 1rem 0;
}
a {
color: $uw-white;
height: 100%;
text-decoration: none;
width: 100%;
&:hover {
color: $uw-gold;
}
}
}
}
}
}
source/_patterns/03-layouts/navigation/navigation.twig
+ 32
− 5
View file @ 57553e54
<nav class="uw-main-navigation">
{% include '@components/menu/menu.twig' with {
'menu_name': 'main',
'items': items
} %}
<nav class="uw-main-nav">
<div class="uw-main-nav__wrapper">
<div class="uw-main-nav__home">
<a href="/home" class="uw-site-home__link">
<span class="off-screen">Home</span>
</a>
</div>
<div class="uw-main-nav__links">
{% if items|length > 5 %}
{% set main_links = items|slice(1, 5) %}
{% else %}
{% set main_links = items %}
{% endif %}
{% include '@components/menu/menu.twig' with {
'menu_name': 'main',
'items': main_links
} %}
</div>
{% if items|length > 5 %}
<div class="uw-main-nav__more">
<ul class="menu menu--main-more">
<li class="menu__item has-submenu">
{% set more_links = items|slice(6, item.length) %}
{% include '@components/menu/menu.twig' with {
'menu_name': 'main-more',
'items': more_links
} %}
</li>
</ul>
</div>
{% endif %}
</div>
</nav>
\ No newline at end of file
source/_patterns/03-layouts/navigation/navigation.yml
+ 123
− 0
View file @ 57553e54
......@@ -28,7 +28,130 @@ items:
attributes:
class: ''
in_active_trail: false
submenu:
- text: 'Link #1-2-1'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #1-2-2'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #1-2-3'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #1-3'
url: '/front'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #2'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #3'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #4'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
submenu:
- text: 'Link #4-1'
url: '/front'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #4-2'
url: '/front'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #5'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #6'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
submenu:
- text: 'Link #6-1'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #6-2'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
submenu:
- text: 'Link #6-2-1'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #6-2-2'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #6-2-3'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #6-3'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #7'
url: 'https://uwaterloo.ca/'
original_link:
options:
......
source/_patterns/03-layouts/site-container/site-container.twig
+ 3
− 0
View file @ 57553e54
......@@ -4,6 +4,9 @@
'menu_name': header_menu_name,
'items': header_items
} %}
{% include "@layouts/navigation/navigation.twig" with {
'items': main_menu
}%}
{% include "@layouts/footer/footer.twig" with {
'menu_name': footer_menu_name,
'items': footer_items
......
source/_patterns/03-layouts/site-container/site-container.yml
+ 88
− 1
View file @ 57553e54
......@@ -115,4 +115,91 @@ social_media:
url: "https://www.instagram.com/uofwaterloo/"
- text: "LinkedIn"
url: "https://www.linkedin.com/edu/school?id=10875"
social_media_placement: "global-site-footer"
\ No newline at end of file
social_media_placement: "global-site-footer"
main_menu:
- text: 'Home'
url: '/front'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #1'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
submenu:
- text: 'Link #1-1'
url: '/front'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #1-2'
url: '/front'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #2'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #3'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #4'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
submenu:
- text: 'Link #4-1'
url: '/front'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #4-2'
url: '/front'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #5'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #6'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- text: 'Link #7'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
\ No newline at end of file
source/_patterns/04-components/menu/menu.twig
+ 32
− 1
View file @ 57553e54
......@@ -18,9 +18,20 @@
'class': additional_classes
} %}
<ul {{ add_attributes(additional_attributes) }}>
{% if menu_name == 'main-more' %}
<div class="menu__subnav--outside-wrapper ML0">
<div class="menu__subnav--inside-wrapper ML0">
{% endif %}
{% else %}
<ul class="menu menu__subnav">
{% if menu_level == 1 and menu_name != 'main-more' %}
<div class="menu__subnav--outside-wrapper ML1">
<div class="menu__subnav--inside-wrapper ML1">
{% endif %}
{% endif %}
{% for item in items %}
{% set item_classes = ['menu__item'] %}
......@@ -52,6 +63,20 @@
{% set link_classes = link_classes|merge(link_class) %}
{% endif %}
{% if item.below %}
{% if menu_level == 0 %}
{% set item_classes = item_classes|merge(['has-submenu']) %}
{% elseif menu_level <= 2 %}
{% set item_classes = item_classes|merge(['has-children']) %}
{% endif %}
{% elseif item.submenu %}
{% if menu_level == 0 %}
{% set item_classes = item_classes|merge(['has-submenu']) %}
{% elseif menu_level <= 2 %}
{% set item_classes = item_classes|merge(['has-children']) %}
{% endif %}
{% endif %}
{% set additional_item_attributes = {
'class': item_classes
} %}
......@@ -75,6 +100,12 @@
{% endif %}
</li>
{% endfor %}
</ul>
{% if menu_level == 1 or menu_name == 'main-more' %}
</div></div></ul>
{% else %}
</ul>
{% endif %}
{% endif %}
{% endmacro %}
source/images/icons/dots.png 0 → 100644
+ 0
− 0
View file @ 57553e54
source/images/icons/dots.png

215 B

source/images/icons/home.png 0 → 100644
+ 0
− 0
View file @ 57553e54
source/images/icons/home.png

322 B

0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment