- 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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.