- var pageTitle = 'Курсы страница 3'
-
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: '#'},
]
},
{
pageHead: 'Курсы2', pageUrl: '#'
},
{
pageHead: 'Курсы3', 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
if (item.subMenu)
+subMenu(item.subMenu)
else if (pageTitle !== item.pageHead)
if (item.subMenu)
each subItem in item.subMenu
if (subItem.pageHead === pageTitle)
- activeMenu = true
if (activeMenu)
- activeMenu = false
a(class='link link--active' href=item.pageUrl)=item.pageHead
if (item.subMenu)
+subMenu(item.subMenu)
else
a(class='link' href=item.pageUrl)=item.pageHead
if (item.subMenu)
+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.