如何使用按钮制作水平导航栏

时间：2017-11-09 11:44:14

标签： html css

必须使用按钮代替锚标记来转换此水平导航栏，并使其行为和外观相同

https://codepen.io/shaswat/pen/GOrpKX

应删除锚标记，并应使用<input type=button >

之类的按钮替换

所以它看起来像导航栏

＆＃13;
＆＃13; 
/* Menu CSS */

#cssmenu,
#cssmenu>ul {
  background: black;
  padding-bottom: 3px;
  border-radius: 5px 5px 5px 5px;
}

#cssmenu:before,
#cssmenu:after,
#cssmenu>ul:before,
#cssmenu>ul:after {
  content: "";
  display: table;
  box-sizing: border-box;
}

#cssmenu:after,
#cssmenu>ul:after {
  clear: both;
}

#cssmenu {
  width: auto;
  zoom: 1;
}

#cssmenu>ul {
  background: blue;
  margin: 0;
  padding: 0;
  position: relative;
}
＆＃13; 
<div id='cssmenu'>
  <ul>
    <li><a href='#'>Home</a>
      <ul>
        <li><a href='#'>Product 1</a></li>
        <li><a href='#'>Product 2</a></li>
        <li><a href='#'>Product 3</a></li>
      </ul>


    </li>
    <li><a class='active' href='#'>Products</a>

    </li>
    <li><a href='#'>About</a>
    </li>
    <li><a href='#'>Contact</a></li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

如果我理解你想要做的事情，那只是css的问题：

https://codepen.io/anon/pen/JOENRY 

/* Menu CSS */#cssmenu,
#cssmenu > ul {
  background: black;
  padding-bottom: 3px; 
  border-radius: 5px 5px 5px 5px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
  content: "";
  display: table;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  clear: both;
}
#cssmenu {
  width: auto;
  zoom: 1;
}
#cssmenu > ul {
  background: blue;
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu > ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#cssmenu > ul > li {
  float: left;
  position: relative;
}
#cssmenu button {
    background-color: transparent;
  border: 0px;
}
#cssmenu > ul > li > button {
  padding: 15px 25px;
  display: block;
  color: white;
  font-size: 13px;
  text-decoration: none;  
  text-shadow: 0 -1px 0 #0d0d0d;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
#cssmenu > ul > li:hover > button {
  background: red;
  text-shadow: 0 -1px 0 #97321f;
  text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}

#cssmenu > ul > li.active > button,
#cssmenu > ul > li > button.active {
  background: black;
}
/* Childs */
#cssmenu > ul ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 50px;
  background: green;
  margin: 0;
  padding: 0;
  z-index: -1;
  box-shadow: 5px 5px 5px #808080;
}
#cssmenu > ul li:hover ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
  color: #000;
  z-index: 2;
  top: 50px;
  left: 0;
}
#cssmenu > ul ul:before {
  content: "";
  position: absolute;
  top: -10px;
  width: 100%;
  height: 18px;
  background: transparent;
}
#cssmenu > ul ul li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
#cssmenu > ul ul li button {
  padding: 15px 26px;
  display: block;
  color: white;
  font-size: 14px;
  text-decoration: none;
  width: 150px;
  border-left: 4px solid transparent;
  -webkit-transition: all 0.50s ease-in-out;
  -moz-transition: all 0.50s ease-in-out;
  -ms-transition: all 0.50s ease-in-out;
  transition: all 0.50s ease-in-out;
}
#cssmenu > ul ul li button:hover {
  border-left: 10px solid #d64e34;
  background: grey;
}
#cssmenu > ul ul li button:active {
  background: green;
}

#cssmenu li button:first-child:nth-last-child(2):before { 
    content:""; 
     position: absolute; 
     height:0; 
     width: 0;      
  border: 8px solid transparent;
border-top-color: orange;
     top: 40% ;
     right:5px;
   }
  

#cssmenu li:hover > button:first-child:nth-last-child(2):before {
  border: 8px solid transparent; 
  border-bottom-color: orange; 
  margin-top:-6px
}
<div id='cssmenu'>
<ul>
   <li ><button href='#'>Home</button>
     <ul>
         <li><button href='#'>Product 1</button></li>
         <li><button href='#'>Product 2</button></li>
         <li><button href='#'>Product 3</button></li>
      </ul>
     
     
   </li>
   <li><button class='active' href='#'>Products</button>
      
   </li>
   <li><button href='#'>About</button>
   </li>
   <li><button href='#'>Contact</button></li>
</ul>
</div>

答案 1 :(得分：0)

我刚刚在html和css中替换了一个带按钮，并添加了一个按钮css标签（不要像使用它一样使用它而是仅用于演示目的）。我给了按钮蓝色的bg颜色，并删除了他们的白色边框。而不是href使用onclick事件并将它们附加到addEventlistner以修补它们。我以为我不推荐在这里使用按钮但是你去了。

/* Menu CSS */

#cssmenu,
#cssmenu>ul {
  background: black;
  padding-bottom: 3px;
  border-radius: 5px 5px 5px 5px;
}

#cssmenu:before,
#cssmenu:after,
#cssmenu>ul:before,
#cssmenu>ul:after {
  content: "";
  display: table;
  box-sizing: border-box;
}

#cssmenu:after,
#cssmenu>ul:after {
  clear: both;
}

#cssmenu {
  width: auto;
  zoom: 1;
}

#cssmenu>ul {
  background: blue;
  margin: 0;
  padding: 0;
  position: relative;
}

#cssmenu>ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#cssmenu>ul>li {
  float: left;
  position: relative;
}

#cssmenu>ul>li>a {
  padding: 15px 25px;
  display: block;
  color: white;
  font-size: 13px;
  text-decoration: none;
  text-shadow: 0 -1px 0 #0d0d0d;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}

#cssmenu>ul>li:hover>a {
  background: red;
  text-shadow: 0 -1px 0 #97321f;
  text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}

#cssmenu>ul>li.active>a,
#cssmenu>ul>li>a.active {
  background: black;
}


/* Childs */

#cssmenu>ul ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 50px;
  background: green;
  margin: 0;
  padding: 0;
  z-index: -1;
  box-shadow: 5px 5px 5px #808080;
}

#cssmenu>ul li:hover ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
  color: #000;
  z-index: 2;
  top: 50px;
  left: 0;
}

#cssmenu>ul ul:before {
  content: "";
  position: absolute;
  top: -10px;
  width: 100%;
  height: 18px;
  background: transparent;
}

#cssmenu>ul ul li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

#cssmenu>ul ul li a {
  padding: 15px 26px;
  display: block;
  color: white;
  font-size: 14px;
  text-decoration: none;
  width: 150px;
  border-left: 4px solid transparent;
  -webkit-transition: all 0.50s ease-in-out;
  -moz-transition: all 0.50s ease-in-out;
  -ms-transition: all 0.50s ease-in-out;
  transition: all 0.50s ease-in-out;
}

#cssmenu>ul ul li a:hover {
  border-left: 10px solid #d64e34;
  background: grey;
}

#cssmenu>ul ul li a:active {
  background: green;
}

#cssmenu li a:first-child:nth-last-child(2):before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border: 8px solid transparent;
  border-top-color: orange;
  top: 40%;
  right: 5px;
}

#cssmenu li:hover>a:first-child:nth-last-child(2):before {
  border: 8px solid transparent;
  border-bottom-color: orange;
  margin-top: -6px
}
<div id='cssmenu'>
  <ul>
    <li><button>Home</button>
      <ul>
        <li><button>Product 1</button></li>
        <li><button>Product 2</button></li>
        <li><button>Product 3</button></li>
      </ul>


    </li>
    <li><button class='active'>Products</button>

    </li>
    <li><button>About</button>
    </li>
    <li><button>Contact</button></li>
  </ul>
</div>

答案 2 :(得分：0)

试试这段代码

/* Menu CSS */

#cssmenu,
#cssmenu>ul {
  // background: black;
  padding-bottom: 3px;
  border-radius: 5px 5px 5px 5px;
}

#cssmenu:before,
#cssmenu:after,
#cssmenu>ul:before,
#cssmenu>ul:after {
  content: "";
  display: table;
  box-sizing: border-box;
}

#cssmenu:after,
#cssmenu>ul:after {
  clear: both;
}

#cssmenu {
  width: auto;
  zoom: 1;
}

#cssmenu>ul {
  //background: blue;
  margin: 0;
  padding: 0;
  position: relative;
}

#cssmenu>ul ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 10px;
  margin: 0;
  padding: 0;
  z-index: -1;
  //box-shadow: 5px 5px 5px #808080;
  display: block;
}

#cssmenu>ul li {
  display: inline;
}

#cssmenu>ul li input {
  text-decoration: none;
  padding: 7px;
  background-color: red;
  border: none;
}

#cssmenu>ul li:hover ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
  color: #000;
  z-index: 2;
  top: 32px;
  left: 0;
  display: block !important;
}

#cssmenu>ul ul li input {
  padding: 15px 26px;
  display: block;
  color: white;
  font-size: 14px;
  text-decoration: none;
  width: 150px;
}
<div id='cssmenu'>
  <ul>
    <li><input type="button" value="Home">
      <ul>
        <li><input type="button" value="Product 1"></li>
        <li><input type="button" value="Product 2"></li>
        <li><input type="button" value="Product 3"></li>
      </ul>


    </li>
    <li><input type="button" value="Products">

    </li>
    <li><input type="button" value="About">
    </li>
    <li><input type="button" value="Contact"></li>
  </ul>
</div>

相关问题
最新问题