Как вывести код Velocity в горизонтальное меню? - PullRequest
Новая
       8

Как вывести код Velocity в горизонтальное меню?

0 голосов
/ 04 февраля 2019

Я не могу получить правильный вывод меню из моего кода скорости.Я думаю, что порядок тегов размещен неправильно.Или это как-то связано со счетчиком.

Я переместил теги в моем коде скорости, но не могу получить желаемый результат.Я очень новичок в этом типе кода, и я также работаю в Sitevison, ниже вы можете найти код Velocity и код CSS.

Код скорости 

#set ($propertyUtil = $sitevisionUtils.propertyUtil)
#if ($propertyUtil.getNode($portlet, 'menuRoot'))
#set ($nodeIteratorUtil = $sitevisionUtils.nodeIteratorUtil)
#set ($nodeTreeUtil = $sitevisionUtils.nodeTreeUtil)
#set ($rootNode = $propertyUtil.getNode($portlet, 'menuRoot'))
#set ($pages = $nodeIteratorUtil.getMenuItems($rootNode))
#set ($counter = 0)
#if ($pages.hasNext())
  #set ($linkRenderer = $sitevisionUtils.linkRenderer)
  #set ($currentPage = $sitevisionUtils.portletContextUtil.currentPage)
      <div class="navbar">
          <div class="subnav"> 
            #foreach ($p in $pages)
                #if ($linkRenderer.isValidTarget($p))
                    $linkRenderer.update($p)
                    #set ($subPages = $nodeIteratorUtil.getMenuItems($p))
                    #set ($hasSubLevels = $subPages.hasNext())
                    <button class="subnavbtn"> 
                        $linkRenderer.render()</button>
                        #if ($hasSubLevels)
                       <div class="subnav-content">
                            #foreach ($sub in $subPages)
                                #if ($linkRenderer.isValidTarget($sub))
                                    $linkRenderer.update($sub)
                                $linkRenderer.render()
                                #end
                            #end  
                         </div>
                        #end
                #end
                #set ($counter = $counter +1)
            #end
        </div></div>
   #end
#end

Код CSS 

.navbar{overflow: hidden;background-color: #333;}

.navbar a{float: left;font-size: 16px;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}

.subnav{float: left;overflow: hidden;}

.subnav .subnavbtn{font-size: 16px;  border: none;outline: none;color: white;padding: 14px 16px;background-color: inherit;font-family: inherit;margin: 0;}

.navbar a:hover, .subnav:hover .subnavbtn{background-color: red;}

.subnav-content{display: none;position: absolute;left: 0;background-color: red;width: 100%;z-index: 1;}

.subnav-content a{float: left;color: white;text-decoration: none;}

.subnav-content a:hover{background-color: #eee;color: black;}

.subnav:hover .subnav-content{display: block;}

Вот ссылка на то, как я хочу, чтобы меню выглядело https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_subnav

Вот так выглядит моя меня прямо сейчас, когда я наводю указатель мыши на ссылку.My menu

...