共有 0 条评论

利用HTML《select》标签做点击下拉菜单 – 小冉的博客

利用HTML《select》标签做点击下拉菜单

用手机访问博客,菜单变成下拉式的了,在电脑上测试正常,在手机上就不好用了,效率太差,指向弹出不如点击弹出的实用,下面就说个利用点击下拉选择框来做一个点击折叠菜单,下面是案例源码,

<!DOCTYPE html>
<html>
<body>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  
</body>
</html>

给他增加上点击跳转功能

<!DOCTYPE html>
<html>
<body>

<select>
  <option value="小冉的博客">请选择</option>
  <option value="http://ranlingqi.com/archive">归档</option>
  <option value="http://ranlingqi.com/category/by-talk">杂谈</option>
  <option value="http://ranlingqi.com/category/like">喜欢</option>
</select>
</body>
</html>

这样的话就可以了,默认的下拉框太难看了,给他增加图标字体

<!DOCTYPE html>
<html>
//这里写图标字体的css哦
<style type="text/css">
.fa {
    font-family: FontAwesome;
    font-style: normal;
}
</style>
<body>
<div id="categories"><i class="fa fa-bars"></i>
<select>
  <option value="小冉的博客">请选择</option>
  <option value="http://ranlingqi.com/archive">归档</option>
  <option value="http://ranlingqi.com/category/by-talk">杂谈</option>
  <option value="http://ranlingqi.com/category/like">喜欢</option>
</select>
</div>
</body>
</html>

这样就可以了,如果你觉得还不好看可以自己添加些css样式

  • 用支付宝打我
  • 用微信打我

你可以像猪一样的生活,但你永远不会像猪一样快乐!!!

2条回应:“利用HTML《select》标签做点击下拉菜单”

  1. 静香说道:

    顶.支持,路过!

  2. 淑梅说道:

    好文一定要顶,支持一下

发表评论

电子邮件地址不会被公开。 必填项已用*标注