提问人：Mac 提问时间：5/10/2023 最后编辑：InSyncMac 更新时间：5/10/2023 访问量：56
需要在 HTML 和 CSS 中重构的 UI 设计
UI Design that need to restructure in HTML and CSS
问：
我希望下拉菜单设计看起来像 [Mega Menu Dropdown]，但设计看起来像 [Dropdown]。我的CSS很差，我需要你的帮助。
我正在使用 Bootstrap v3.4.1。下面的脚本将用于在我的表单中运行我的服务器。
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
我期望的设计需要与[Mega Menu Dropdown]相同，如图所示。
非常感谢。
Mega Menu Dropdown 下拉列表
这是我的代码：
nav li {
/* remove all the bullets and baked in style - probably should use div set instead */
list-style: none;
margin: 0px;
padding: 0px;
}
.navbar-link {
color: #000080;
background-color: deepskyblue;
}
.navbar-head {
background-color: #000099;
font-family: Calibri, sans-serif;
}
.navbar-head2 {
background-color: deepskyblue;
font-family: Calibri, sans-serif;
font-size: 18px;
}
.navbar-brand>strong {
color: white;
font-size: 3.3rem;
text-transform: uppercase;
}
.menu-hr-line {
/* border-top-width: 3px;*/
border-top-color: #000099;
}
.dropdown.has-megamenu {
position: static;
}
.dropdown-header {
color: #050A30;
font-size: 14px;
font-weight: bold;
}
.dropdown-menu {
width: 200px;
}
.dropdown-menu .columns-4 {
min-width: 1300px;
background-color: #e6ffff;
}
.dropdown-menu .submenu {
display: block !important;
position: absolute;
left: 50%;
/*top: 1px;*/
z-index: 1;
}
.dropdown-menu > li:hover > .submenu {
display: block;
z-index: 1;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.multi-column-dropdown {
list-style: none;
margin: 0px;
padding: 0px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.324624;
color: #000C66;
white-space: normal;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: cornflowerblue;
background-color: #f2f2f2;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
background-color: #777;
border-color: #fff;
}<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<nav class="navbar-head">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" title="facility portal">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/"><strong>PORTAL</strong></a>
</div>
</div>
</nav>
<div class="navbar-head2">
<div class="container-fluid">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="~/Home" class="navbar-link">HOME</a></li>
<li class="dropdown"><span data-toggle="dropdown" class="dropdown-toggle navbar-link">GENERAL <span class="caret"></span></span>
<ul role="menu" class="dropdown-menu">
<li><a id="A1" href="#">Chart</a></li>
<li><a id="A2" href="#">Document</a></li>
<li><a id="A3" href="#">Equipment</a></li>
<li><a id="A4" href="#">Utility</a></li>
<li><a id="A5" href="#">Plant</a></li>
</ul>
</li>
<li class="nav-item dropdown has-megamenu"><span data-toggle="dropdown" class="dropdown-toggle navbar-link">MODULES <span class="caret"></span></span>
<ul role="menu" class="dropdown-menu multi-column columns-4">
<li>
<div class="row">
<div class="col-md-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Report</li>
<li><hr class="border-top-3 solid w-100 menu-hr-line" /></li>
<li class="dropdown" data-toggle="dropdown"><span>Daily</span>
<ul role="menu" class="dropdown-menu submenu">
<li><a id="A16" href="#">1</a></li>
<li><a id="A17" href="#">3</a></li>
<li><a id="A18" href="#">5</a></li>
<li><a id="A19" href="#">7</a></li>
<li><a id="A20" href="#">9</a></li>
<li><a id="A21" href="#">12</a></li>
</ul>
</li>
<li><a id="A7" href="#">Weekly</a></li>
<li><a id="A8" href="#">Abnormality</a></li>
<li><a id="A9" href="#">Plant</a></li>
<li><a id="A10" href="#">Calibration</a></li>
<li><a id="A11" href="#">Supervising</a></li>
</ul>
</div>
<div class="col-md-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Inventory</li>
<li><hr class="solid w-100 menu-hr-line" /></li>
<li><a id="A12" href="#">Items</a></li>
</ul>
</div>
<div class="col-md-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Schedule</li>
<li><hr class="solid w-100 menu-hr-line" /></li>
<li><a id="A13" href="#">Master</a></li>
</ul>
</div>
<div class="col-md-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Documentation</li>
<li><hr class="solid w-100 menu-hr-line" /></li>
<li><a id="A14" href="#">Equipment</a></li>
<li><a id="A15" href="#">Drawing</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#" class="navbar-link">OFFINE MANAGEMENT SYSTEM</a></li>
</ul>
</div>
</div>
</div>
</div>答： 暂无答案
评论