时间戳

首页 > 解决方案 > 如何创建自定义导航栏？

html - 如何创建自定义导航栏？

问题描述

我想在我的 HTML 网站上创建自己的自定义导航栏。

例如：
https ://www.bittersweetcandybowl.com/archive.html
https://www.sleeplessdomain.com/

（Navigatortwo 是自定义导航栏）

我试着做他们喜欢复制一些代码的事情，但它似乎不起作用。

* body {
  padding: 0;
  margin: 0 auto;
}

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
  background-image: url("Navigatertwo.jpg");
  background-repeat: no-repeat;
  height: 75px;
  width: 770px;
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 30px;
  width: 25%;
  /* Four links of equal widths */
  text-align: center;
}

.navbar a:hover {
  background-color: #000;
}

.navbar a.active {
  background-color: #4CAF50;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
  }
}
<body>
  <ul id="mainnav">
    <div class="mainnav">
      <li><a href="ArchiveTwo.html" class="mainnav_about"><span class="titletext"></span></a></li>
      <li><a href="About.html" class="mainnav_archive"><span class="titletext"></span></a></li>
      <li><a href="Extras.html" class="mainnav_extras"><span class="titletext"></span></a></li>
      <li><a href="Characters.html" class="mainnav_characters"><span class="titletext"></span></a></li>
      <link rel="stylesheet" type="text/css" href="Nav.css">
  </ul>
</body>

标签： htmlcss

解决方案

这将解决您的问题。复制此代码并粘贴到您的项目中

ul#nav {
	list-style: none;
	height: 134px;
	position: relative;
	background-image: url(https://blasto.enterprises/img/global_header_rainbow_club_noschedule_lighter.png);
	background-repeat: no-repeat;
	padding-left: 0;
	margin: -15px 0 0;
}
ul#nav li a {
	height: 55px;
	display: block;
	position: absolute;
}
a.nav_about {
	width: 125px;
	height: 55px!important;
	top: 45px;
	left: 25px;
}
a.nav_archive {
	width: 146px;
	top: 35px;
	left: 162px;
}
a.nav_extras {
	width: 123px;
	top: 36px;
	left: 325px;
}
a.nav_candybooru {
	width: 223px;
	top: 47px;
	left: 467px;
}
a.nav_club {
	width: 95px;
	top: 50px;
	left: 706px;
}
a.nav_store {
	width: 108px;
	height: 56px!important;
	top: 38px;
	left: 809px;
}
.titletext {
	display: none;
}
<ul id="nav">
    <li><a href="" class="nav_about"><span class="titletext">About</span></a></li>
    <li><a href="" class="nav_archive"><span class="titletext">Archive</span></a></li>
    <li><a href="" class="nav_extras"><span class="titletext">Extras</span></a></li>
    <li><a href="" class="nav_candybooru"><span class="titletext">Candybooru</span></a></li>
    <li><a href="" class="nav_club"><span class="titletext">Club</span></a></li>
    <li><a href="" class="nav_store"><span class="titletext">Store</span></a></li>
</ul>

推荐阅读