脚菜单与子菜单

时间:2017-09-09 09:10:47

标签: html css silverstripe

我在SilverStripe项目上做了一个菜单,这个菜单是一个脚菜单,现在我想让它支持子菜单。我尝试了很多教程,但是我的项目没有任何效果。我对CSS不太好,也许你们中的一些人可以建议我做什么和编辑什么。

我的脚踏导航CSS;

@media screen and (min-width: 768px) {
#Navigation {
    width: 100%;
    z-index: 120;
    position:fixed;
    display: block;
    bottom:0;
    background: white no-repeat center bottom;
    }
}

    #Navigation ul { 
        float: left; 
        margin-left: 300px;
    }
        #Navigation ul li { 
            list-style: none; 
            margin: 0 15px; 
            float: left;
            line-height: 2.8em;
            display: block;

        }
            #Navigation ul li a { 
                float: left;
                text-decoration: none;
                display: block; 
                height: 2.3em; 
                font-size: 1.6em; 
                padding: 0 0 0 10px;
                color: #808080;
            }
                #Navigation ul li a span {
                    text-align: center;
                    float: left;
                    padding-right: 10px;
                    height: 2.3em;
                }
                    #Navigation ul li a:hover { 

                        color: black;
                        cursor: pointer;

                    }

我的模板文件;

<ul>
    <% if $CustomMenu(foot-menu) %>
    <% loop $CustomMenu(foot-menu) %>
            <li>
            <a href="$Link" title="Go to the $Title page" class="<% if $isCurrent %>current<% else_if $isSection %>section<% end_if %>">
                $MenuTitle
            </a>

                <% if $Children %>
                    <ul>
                        <% loop $Children %>
                            <li class="$LinkingMode<% if $isCurrent %>current<% else_if $isSection %>section<% end_if %>"><a href="$Link">$MenuTitle</a></li>
                       <% end_loop %>
                      </ul>
                <% end_if %>

        </li>
    <% end_loop %>
<% end_if %>
</ul>

这部分负责子菜单:

        <% if $Children %>
            <ul>
                <% loop $Children %>
                    <li class="$LinkingMode<% if $isCurrent %>current<% else_if $isSection %>section<% end_if %>"><a href="$Link">$MenuTitle</a></li>
               <% end_loop %>
              </ul>
        <% end_if %>

我只需要创建一个简单的子菜单,它可以正常工作,子菜单也可以作为常规的顶级导航菜单。

0 个答案:

没有答案