Вертикальное меню открывается вверх?

Question

Настоящий быстрый, кажется вроде немого вопроса, но я не могу найти ответ нигде.

Мне нужно вертикальное меню, которое появляется из нижнего колонтитула и поднимается по экрану.

Я смотрел на Ajax Collapsible Panel Extender, но не мог заставить его подняться, а не вниз.

Я ограничен программным обеспечением, уже загруженным в виртуальный профиль, который у меня есть на работе (нет администратора, не может быть классным новым), если это что-то доступное в 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 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; 
} 

Answer 2

Heres простой способ сделать это. Не следуя вашему существующему коду, но вы можете легко перевести его для своих нужд. Очевидно, что демо:

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); 
}