[英]Trying to make a top navigation header?
我正在尝试制作一个TOP Navigation标头，可以在其中放置LOGO，然后放置带有配置文件图像的下拉按钮。
这是我要尝试做的。 我已经完成了侧面导航，但是由于某种原因无法弄清楚如何进行顶部导航。
这是我的Side Navigaiton的当前CSS：
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}
.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
.main-menu {
background:#e7e7e7; /*Background color for the Side Navigation */
border-right:1px solid #e7e7e7;
position:absolute;
top: 10%; /* Edit the Height from the Header */
bottom:0;
height:100%;
left:0;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
a:hover,a:focus {
text-decoration:none;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#5fa2db;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
这是我当前的HTML：
<!DOCTYPE html>
<html>
<title>TITLE </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet01.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--- <div class="navbar">
<img src="logo" alt="LOGO">
</div>
MAYBE HAVE A header? --->
<div class="area"></div><nav class="main-menu">
<ul>
<li>
<a href="index.php">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
UI Components
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
Forms
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-folder-open fa-2x"></i>
<span class="nav-text">
Pages
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bar-chart-o fa-2x"></i>
<span class="nav-text">
Graphs and Statistics
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-font fa-2x"></i>
<span class="nav-text">
Typography and Icons
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-table fa-2x"></i>
<span class="nav-text">
Tables
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-map-marker fa-2x"></i>
<span class="nav-text">
Maps
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
<ul class="logout">
<li>
<a href="#">
<i class="fa fa-power-off fa-2x"></i>
<span class="nav-text">
Logout
</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
知道我如何能够做到这一点吗？
有许多不同的方法来实现您的追求。 我发现使用固定导航非常有用，因为那样一来，即使在长页面上滚动，用户也始终可以访问站点菜单。
标记会像...
徽标在这里
<nav class="site-header__nav-container">
<ul class="site-header__nav">
<li>Menu
<ul class="site-header__nav-menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</li>
</ul>
</nav>
css / scss会像...
$header-height: 80px;
.site-header {
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
background-color: #999;
height: $header-height;
overflow: visible;
z-index: 50;
&__nav {
position: relative;
&:hover ul {
max-height: 100vh;
visibility: visible;
}
}
&__nav-menu {
max-height: 0;
visibility: hidden;
transition: all 0.5s ease;
}
}
body {
margin-top: $header-height + 20px;
}
您可以在此处检查Codepen- https ://codepen.io/lukeocom/pen/RLZxeV
我为标头使用了固定的高度，并为body标签的上边距使用了相同的值，这样您就不会从页面上截取任何内容。
我使用flex来放置标题的项目，因为flex很棒！ 您可以使用其他定位技术，或者如果您使用的是诸如引导程序之类的css框架，则可以使用特定的类名进行定位。
希望这可以帮助！
获取标题的高度，并滚动到标题上方时显示顶部导航
[英]Get the height of the header and show top navigation when scrolled beyond the header
在头文件的顶部导航中使用AJAX Search Lite插件-WordPress
[英]Use AJAX Search Lite Plugin in Top Navigation in Header file - WordPress
在网站的不同部分进行标题/导航更改颜色
[英]Make Header/Navigation change colour when on different section of the website
试图在HTML中制作固定表格标题，滚动和可见性问题？
[英]Trying to make fixed table header in HTML, scroll and visibility issues?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.