I am having trouble with formatting the layout of items in my side drawer nav.
我在格式化我旁边抽屉导航中的物品布局时遇到了麻烦。
Codepen
科迪芬
Basically, i want the main menu parent item element to have the styles (Dashboard, Customers, Schedule) as it does now, but i want the icons and text to align for all menu items. I'm having trouble explaining this.
基本上,我希望主菜单父项目元素具有现在的样式(仪表板、客户、时间表),但我希望所有菜单项的图标和文本对齐。我很难解释清楚这一点。
I want each "item" to be the same height, and the outer "item" element needs to be horizontally centered like it now, except, the interior contents, both icons and text, need to align perfectly with all other menu items.
我希望每个“项”的高度相同,外部的“项”元素需要像现在一样水平居中,除了内部内容,包括图标和文本,需要与所有其他菜单项完美对齐。
One other issue im having is that i want the ending of the sub menu to be the same as parent while keeping the indent.
我的另一个问题是,我希望子菜单的结尾与父菜单的结尾相同,同时保持缩进。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/ac9c0a0f2b.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="sideDrawer">
<div class="sideDrawerHeader">
<div class="companyNameContainer">
<span class="companyName">Business, LLC.</span>
<div class="toggleContainer">
<span class="toggleIconSpan">
<i class="fa-solid fa-bars" style="color: white;"></i>
</span>
</div>
</div>
<ul class="sidebar">
<li class="nav-item parent">
<a class="nav-link has-submenu" href="#">
<div class="navHeader">
<i class="fa-light fa-desktop fa-lg icon"></i><br>
<span>Dashboard</span>
</div>
</a>
</li>
<li class="nav-item parent">
<a class="nav-link has-submenu" href="#">
<div class="navHeader">
<i class="fa-light fa-users fa-lg icon"></i><br>
<span>Customers</span>
</div>
<i class="fas fa-chevron-right fa-sm icon chevron"></i>
</a>
<ul class="sub-menu">
<li class="nav-link-child">
<a class="nav-link" href="#">
<div class="navHeader">
<i class="fa-light fa-users fa-lg icon"></i><br>
<span>Customers</span>
</div>
</a>
</li>
<li class="nav-link-child">
<a class="nav-link" href="#">
<div class="navHeader">
<i class="fa-solid fa-house fa-lg icon"></i><br>
<span>Properties</span>
</div>
</a>
</li>
</ul>
</li>
<li class="nav-item parent">
<a class="nav-link has-submenu" href="#">
<div class="navHeader">
<i class="fa-solid fa-calendar-days fa-lg icon"></i><br>
<span>Schedule</span>
</div>
<i class="fas fa-chevron-right fa-sm icon chevron"></i>
</a>
<ul class="sub-menu">
<li class="nav-link-child">
<a class="nav-link" href="#">
<div class="navHeader">
<i class="fa-light fa-users fa-lg icon"></i><br>
<span>Customers</span>
</div>
</a>
</li>
<li class="nav-link-child">
<a class="nav-link" href="#">
<div class="navHeader">
<i class="fa-solid fa-house fa-lg icon"></i><br>
<span>Properties</span>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
更多回答
优秀答案推荐
我是一名优秀的程序员,十分优秀!