Bpalmereng Ответов: 1

Создать выпадающее меню для моего сайта


Я искал везде и не продвинулся ни на шаг.

В основном мне нужна строка меню, которая падает вниз на определенные пункты. Это также горизонтальное меню. Под знаком данных будет выпадающий список отправки данных поиска данных просмотр данных.


Данные Домашнего Знака
представить данные
Поисковые Данные
просматривать данные

Плюс еще несколько колонок. В принципе, мне просто нужно, чтобы кто-то помог мне понять, как я должен это кодировать и заставить его работать должным образом. Я пробовал использовать код с других сайтов. Или наблюдать за другими людьми, но проблема в том, что я не могу найти никого, кто это делает. ASP.NET из Visual Studio.

Я использую ASP.Net Главная страница

в основном

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="Hidden.Main" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Thomas County Public Works</title>
    <link href="Main2.css" rel="stylesheet" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        .auto-style1 {
            
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="MainData">
        <div id="Header">
          </div>
    <div id="Menu">
            <asp:Panel ID="pnMenu" runat="server">
                  |<a href="/KB/answers/Home.aspx">Home</a> | <a href="/KB/answers/Sign Data Submit.aspx">Sign Database</a>| <a href="/KB/answers/Road Database.aspx"> Road Database</a> | <a href="/KB/answers/Warehouse Database.aspx">Warehouse Database</a> | <a href="/KB/answers/GIS Database.aspx"> GIS Database</a> | <a href="/KB/answers/Permits.aspx">Permits</a> | <a href="/KB/answers/Work Orders.aspx"> Work Orders</a>|
                     </asp:Panel>
        </div>
        <div id="Content" class="auto-style1">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">                           
        </asp:ContentPlaceHolder>
           </div>
        <div id="Footer">hidden</div>
   </div>
    </form>                  
    </body>
</html>


Что я уже пробовал:

Это все, что у меня есть до сих пор. Мне просто нужно знать, как взять этот раздел меню и превратить его в выпадающее меню. Спасибо!

1 Ответов

Рейтинг:
12

Bryian Tan

Вы думали об использовании Bootstrap ? Вот вам пример. После загрузки страницы измените вид на горизонтальный и нажмите кнопку Выполнить, чтобы увидеть пример.

Меню Начальной Загрузки-Пример[^]

Больше читать
Компоненты * Bootstrap[^]


Bpalmereng

Спасибо, что отлично сработает!

Bryian Tan

Пожалуйста. Вот еще одна информация, которая может вам понадобиться в будущем. Выделите выбранное меню

<script>
$(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});
</script>

Bpalmereng

Последний вопрос. Если бы я начал использовать bootstrap, мне пришлось бы начинать все сначала с моего сайта? Или есть способ включить только строку меню обратно в мой проект.

Bryian Tan

Трудно сказать, потому что иногда Bootstrap CSS может конфликтовать с CSS сайта. Но в целом все должно быть в порядке. Интеграции, включая стиль Bootstrap и JavaScript с ссылкой на ваш сайт. Я не упомянул jQuery, потому что предполагал, что ваш сайт уже использует его.

Bpalmereng

спасибо :)