javascript - 垂直菜单向上打开？

Question

真的很快，似乎是一个愚蠢的问题，但我无法在任何地方找到答案。

我需要一个从页脚弹出并在屏幕上移的垂直菜单。

我一直在查看 Ajax 可折叠面板扩展器，但无法使其上升而不是下降。

我仅限于已经加载到我在这里工作的虚拟配置文件中的软件(没有管理员，无法获得很酷的新东西)所以如果它在 CSS、VB.NET、ASP 或 AJAX 中可用要漂亮，否则我需要找点别的事做。

我正在寻找的是一个控件，我可以使用它来使菜单向上显示而不是向下显示。谢谢。

HTML 对于侧边菜单:(像这样，但在页脚中并朝向页眉打开)

<asp:ImageButton class="Header-Cart" ID="imgCart" runat="server" 
        ImageUrl="~/images/Mobile/mobile-header-cart.png" onclick="imgCart_Click" />
        </div>

        <asp:Panel ID="pnlNavMenu"  class="Mobile-Menu" runat="server" Visible="false">
            <div class="Search-Block"><div class="search-textbox"><div>
                       <asp:ImageButton ID="btnSearch" class="Search-Icon"
                            BackColor="White"  runat="server" OnClick="btnSearch_Click" 
                            ImageUrl="~/images/Mobile/mobile-search-icon.png" />
                       <asp:TextBox ID="txtSearch" runat="server" CssClass="Search" onblur="if(this.value == '') { this.value='Enter keyword or product code'; isSet=true; }"
                            onmouseover="if(this.value == 'Enter keyword or product code') { this.value='';isSet = true; }"
                            onmouseout="if(this.value == '' && !isSet) { this.value='Enter keyword or product code'; isSet=>false; }"
                            MaxLength="255" Text="Enter keyword or product code" ontextchanged="btnSearch_Click"/>
                       <asp:ImageButton ID="btnClear" class="Search-Cancel" BackColor="White" runat="server" OnClick="btnClear_Click" ImageUrl="~/images/Mobile/mobile-search-cancel.png" />
                        </div>
             </div> 
             </div>
              <div class="Nav-Item">
                <asp:Panel ID="pnlShop" runat="server">
                    <div class="Menu-Panel-Header"><asp:Label ID="lblShopBtn" runat="server" Text="Shop" /></div>
                    <div class="Menu-Panel-Item"><asp:HyperLink ID="hlComputers" runat="server" Text="Computers" NavigateUrl="/Computers/Index.aspx" /></div>
                    <div class="Menu-Panel-Item"><asp:HyperLink ID="hlElectronics" runat="server" Text="Electronics" NavigateUrl="/Electronics/Index.aspx" /></div>
                    <div class="Menu-Panel-Item"><asp:HyperLink ID="hlExLease" runat="server" Text="Ex-Lease" NavigateUrl="/Computers/Ex-Lease/index.aspx" /></div>
                    <div class="Menu-Panel-Item"><asp:HyperLink ID="hlClearance" runat="server" Text="Clearance" NavigateUrl="/search.aspx?S=Clearance+Item&picture=0" /></div>
                    <div class="Menu-Panel-Item"><asp:HyperLink ID="hlRepairs" runat="server" Text="Repairs" NavigateUrl="/Christchurch-Computer-Repairs-and-Service.aspx" /></div>
                </asp:Panel>
                <asp:CollapsiblePanelExtender ID="cpe1" runat="Server" TargetControlID="pnlShop" CollapsedSize="32" ExpandedSize="192" Collapsed="True" ExpandControlID="lblShopBtn" CollapseControlID="lblShopBtn" AutoCollapse="false" AutoExpand="False" ScrollContents="True" ExpandDirection="Vertical" />
                 </div>
             <div class="Nav-Item">
                <asp:Panel ID="pnlAccount" runat="server" >
                <div class="Menu-Panel-Header"><asp:Label ID="lblAccBtn" runat="server" Text="Account" /></div>
                <div class="Menu-Panel-Item"><asp:HyperLink ID="hlLogInOut" runat="server" Text="Login" /></div>
                <div class="Menu-Panel-Item"><asp:HyperLink ID="hlRegDetails" runat="server" Text="Register" /></div>
                </asp:Panel>
                <asp:CollapsiblePanelExtender ID="cpe2" runat="Server" TargetControlID="pnlAccount" CollapsedSize="32" ExpandedSize="96" Collapsed="True" ExpandControlID="lblAccBtn" CollapseControlID="lblAccBtn" AutoCollapse="false" AutoExpand="False" ScrollContents="True" ExpandDirection="Vertical" />
                </div>
             <div class="Nav-Item">
                <asp:Panel ID="pnlContact" runat="server" >
                <div class="Menu-Panel-Header"><asp:Label ID="lblContBtn" runat="server" Text="Contact Us" /></div>
                <div class="Menu-Panel-Item"><asp:Hyperlink ID="lblPhone" runat="server" Text="0800 165 800" NavigateUrl="Tel:0800165800" /></div>
                <div class="Menu-Panel-Item"><asp:HyperLink ID="hlRiccarton" runat="server" Text="Tower Junction" NavigateUrl="https://www.google.co.nz/maps/place/GlobalPC/@-43.538377,172.605323,17z/data=!3m1!4b1!4m2!3m1!1s0x0:0xb97744d7c8d04fa0?hl=en" /></div>
                <div class="Menu-Panel-Item"><asp:HyperLink ID="hlShirley" runat="server" Text="Homebase" NavigateUrl="https://www.google.co.nz/maps/place/GlobalPC/@-43.49374,172.660448,17z/data=!3m1!4b1!4m2!3m1!1s0x0:0x812c53f1576bdfd?hl=en" /></div>
                 <div class="Menu-Panel-Item"><asp:HyperLink ID="hlFeedback" runat="server" Text="Feedback Form" NavigateUrl="feedback.aspx" /></div>
                </asp:Panel>
                <asp:CollapsiblePanelExtender ID="cpe3" runat="Server" TargetControlID="pnlContact" CollapsedSize="32" ExpandedSize="192" Collapsed="True" ExpandControlID="lblContBtn" CollapseControlID="lblContBtn" AutoCollapse="false" AutoExpand="False" ScrollContents="True" ExpandDirection="Vertical" />
                </div>
         </asp:Panel>

         <asp:Panel ID="pnlContent" runat="server" class="Mobile-Body">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>   
         </asp:Panel>      

Answer 1

您可以使用 CSS3 转换来垂直转换元素。我没有 VS 来运行 .net 代码，但这是一个通用示例。这是页面底部的菜单演示。 LINK .这是 HTML:

<header>
    <ul class="menu">
        <li><span>Menu Item 1</span>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
                <li><a href="#">Submenu Item 3</a></li>
                <li><a href="#">Submenu Item 4</a></li>
                <li><a href="#">Submenu Item 5</a></li>
            </ul>
        </li>
        <li><span>Menu Item 2</span>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
            </ul>
        </li>
        <li><a href="">Menu Item 3</a></li>
        <li><span>Menu Item 4</span>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
            </ul>
        </li>        
    </ul>
</header>

这是 CSS:

header {
    position:fixed;
    bottom: 0;
    left:0;
    width:100%;
    height:50px;
    background-color: yellowgreen;
    font-family: sans-serif;
}
a {
    color: yellowgreen;
    text-decoration: none;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.menu > li {
    float: left;
    line-height: 50px;
    text-align: center;
    color: white;
    width: 150px;
}
li span {
    height: 50px;
    width: 100%;
    display: block;
    background-color: yellowgreen;
    position: relative;
    z-index: 100;
    cursor:pointer;
}
ul.menu > li > a {
    color: white;
}
li > ul {
    background-color: white;
    color: yellowgreen;
    text-align: left;
    -webkit-transform:translateY(-50px);
    -moz-transform:translateY(-50px);
    transform:translateY(-50px);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
li > ul > li {
    border: 1px solid yellowgreen;
    border-top: none;
    padding: 0 10px;    
}
li:hover ul {
    opacity: 1;
    -webkit-transform:translateY(-100%);
    -moz-transform:translateY(-100%);
    transform:translateY(-100%) -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}