Question

目前我只有一个桌面菜单，它也会显示在移动设备上。但是我的css和html不适合移动，因为子菜单和Styling就是这样。当前的桌面菜单如下所示：

<nav id="topnav" role="navigation">
    <?php
        show_menu2(
            $aMenu = 1,
            $aStart = SM2_ROOT,
            $aMaxLevel = SM2_ALL,
            $aOptions = SM2_ALL,
            $aItemOpen = '<li[if(class==menu-current){ class="current"}]>[a][menu_title]</a>',
            $aItemClose = '</li>',
            $aMenuOpen = '<ul>',
            $aMenuClose = '</ul>',
            $aTopItemOpen = false,
            $aTopMenuOpen = '<ul class="srt-menu" id="menu-main-navigation">'
        );
    ?>
</nav>

.srt-menu li a {
 transition: 0.3s ease;

 font-size: 20px;
 text-decoration: none;

 padding: 0px 0;
 margin: 0 0px;
 }

.srt-menu li li a {
background:#e8e8e8;
padding-left:40px;
}
.srt-menu li li li a {
background:#efefef;
padding-left:80px;
}

/*SECONDARY MENU*/
 #secondary-navigation{
margin-bottom:60px;
}
``#secondary-navigation ul{
margin:0;
padding:0;
}
#secondary-navigation ul li a{ 
background:pink;
display:block;
margin:5px 0; 
padding:10px;
text-decoration:none;
}


/*colors and backgrounds*/
body{
    background:#fff;
}


/*** MAIN MENU - ESSENTIAL STYLES ***/


.srt-menu, .srt-menu * {
    list-style:     none;
}
.srt-menu ul {
    position:       absolute;
    display:none;
    width:          12em; /* left offset of submenus need to match (see below) */
}
.srt-menu ul li {
    width:          100%;
}

.srt-menu li {
    float:          left;
    position:       relative;
    margin-left:1px;
}
.srt-menu li li {
    margin-left:0px;
}
.srt-menu a {
    display:        block;
    position:       relative;
}



/*** DEMO1 SKIN ***/
#topnav, .srt-menu {
    float:right;
    margin: .35em 0 0 0;
}

.srt-menu li a {
    background:transparent;
    margin:0; 
    //padding:50px 50px;
    //height:45px;


   //background transparent;
    color:#195891;
    font-family: Sans-serif;
    font-size: 20px;
    height: 60px;
    width: auto;
    line-height: 60px;
    padding-right:15px ;
    padding-left:15px;
    //margin: 25px 25px 25px ;
    text-align: center;
    border: 0;
    transition: all 0.3s ease 0s;


}
.srt-menu a, .srt-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    //color:            #1aa8a4;    
}



.srt-menu li a:hover{
color:#410CE8;
     box-shadow:  0px -8px 0px -2px #1aa8a4;
}

.srt-menu li:hover ul,
.srt-menu li.sfHover ul {

    display:block;
    left:           0;
    //top:          45px; /* match top ul list item height */
    //z-index:      99;
    //-webkit-box-shadow:  2px 3px 2px 0px red;
    //box-shadow:  2px 3px 2px 0px red;
}

.srt-menu li.current a{
color:#2f86c4;
background:transparent;
}

如何在菜单关闭时添加带三明治按钮的菜单，在打开菜单时添加“x”按钮，功能：关闭菜单。像这个here

我是初学者，不能自行更改编码，因为如果您可以根据已存在的菜单添加示例，将会很有帮助。

如何添加移动菜单新的移动菜单？

0 个答案: