尝试制作顶部导航标题？
[英]Trying to make a top navigation header?
问题描述
I'm trying to make a TOP Navigation header where I can put a LOGO and then a Drop down button with a profile image. 
我正在尝试制作一个TOP Navigation标头，可以在其中放置LOGO，然后放置带有配置文件图像的下拉按钮。
Heres What I'm trying to do. 这是我要尝试做的。 I already have my Side Navigation Made but cant for some reason figure out how to make the top navigation. 我已经完成了侧面导航，但是由于某种原因无法弄清楚如何进行顶部导航。
Here's my Current CSS for my Side Navigaiton: 这是我的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%;
}
Here's my Current HTML: 这是我当前的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>
Any idea how I might be able to do this? 知道我如何能够做到这一点吗？
1 个解决方案
解决方案1
0 已采纳 2017-10-02 00:31:58
There are many different ways to achieve what you are after. 有许多不同的方法来实现您的追求。 I find using a fixed navigation is great because that way the user always has access to the site menu even when scrolling on long pages. 我发现使用固定导航非常有用，因为那样一来，即使在长页面上滚动，用户也始终可以访问站点菜单。
The markup would go something like... 标记会像...
Logo here 徽标在这里
<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>
The css/scss would go something like... 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;
}
You can check a codepen here -- https://codepen.io/lukeocom/pen/RLZxeV 您可以在此处检查Codepen- https ://codepen.io/lukeocom/pen/RLZxeV
I have used a fixed height for the header, and used the same value for the top margin on the body tag, that way you don't cut off any content from your page. 我为标头使用了固定的高度，并为body标签的上边距使用了相同的值，这样您就不会从页面上截取任何内容。
I have used flex to position the items of the header because flex is awesome! 我使用flex来放置标题的项目，因为flex很棒！ You could use other positioning techniques, or if you are using a css framework like bootstrap, then you can use specific class names for positioning. 您可以使用其他定位技术，或者如果您使用的是诸如引导程序之类的css框架，则可以使用特定的类名进行定位。
Hope this helps! 希望这可以帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.