真的很快，似乎是一个愚蠢的问题，但我无法在任何地方找到答案。
我需要一个从页脚弹出的垂直菜单，然后在屏幕上显示。
我一直在关注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>
答案 0 :(得分：1)
您可以使用CSS3 Transformations垂直翻译元素。我没有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;
}
答案 1 :(得分：1)
这是一种简单的方法。不遵循现有代码，但您可以轻松地根据您的需求进行翻译。显然是一个演示：
http://jsfiddle.net/bhtg60qy/1/
HTML
<nav>
<ul>
<li>Nav One</li>
<li>Nav Two</li>
<li class="dropdown">Nav Three
<ul class="dropdown__list">
<li>Nav One</li>
<li>Nav Two</li>
<li>Nav Three</li>
<li>Nav Four</li>
<li>Nav Five</li>
</ul>
</li>
<li>Nav Four</li>
<li>Nav Five</li>
</ul>
</nav>
CSS
nav {
height: 50px;
background: #ccc;
margin-top: 300px;
}
nav li {
position: relative;
float: left;
line-height: 50px;
padding: 0 20px;
}
.dropdown__list {
position: absolute;
bottom: 50px;
left: 0;
width: 180px;
color: #fff;
background: #666;
visibility: hidden;
opacity: 0;
-webkit-transform: translateY(20px);
-webkit-transition: all .2s ease-in-out;
}
.dropdown:hover .dropdown__list {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
}