- var pageTitle = 'Курсы страница 2'
-
var pages = [
{pageHead : 'Главная', pageUrl : '#', subMenu: [
{pageHead : 'Главная страница 1', pageUrl : '#'},
{pageHead : 'Главная страница 2', pageUrl : '#'},
]
},
{
pageHead: 'О нас', pageUrl: '#', subMenu: [
{pageHead: 'О нас страница 1', pageUrl: '#'},
{pageHead: 'О нас страница 2', pageUrl: '#'},
{pageHead: 'О нас страница 3', pageUrl: '#'},
{pageHead: 'О нас страница 4', pageUrl: '#'},
]
},
{
pageHead: 'Курсы', pageUrl: '#', subMenu: [
{pageHead: 'Курсы страница 1', pageUrl: '#'},
{pageHead: 'Курсы страница 2', pageUrl: '#'},
{pageHead: 'Курсы страница 3', pageUrl: '#'},
{pageHead: 'Курсы страница 4', pageUrl: '#'},
]
},
]
mixin subMenu(subPages)
ul.sub-list
each item in subPages
li.sub-item
if (pageTitle === item.pageHead)
a(class='sub-link sub-link--active' href=item.pageUrl)=item.pageHead
else
a(class='sub-link' href=item.pageUrl)=item.pageHead
mixin menu()
each item in pages
li.item
if (pageTitle === item.pageHead)
a(class='link link--active' href=item.pageUrl)=item.pageHead
else
a(class='link' href=item.pageUrl)=item.pageHead
if (item.subMenu !== false)
+subMenu(item.subMenu)
.menu
nav.menu
ul.list
+menu
View Compiled
ul, li {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
}
.link {
color: green;
&--active {
color: gold;
}
}
.sub-link {
color: lime;
&--active {
color: red;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.