Html实现添加、删除、右键菜单

2019-09-10 郑州网站建设  

怎么实现一个右键菜单效果,这在初级前端学习中是一个常见的实例,divcss小编实现代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title></title>

    <link href=http://www.divcss5.com/html/"/cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

    <link rel="stylesheet" href=http://www.divcss5.com/html/"https:/cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!--jquery 1.11.3-->

    <script src=http://www.divcss5.com/html/"/cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>

    <style>

        .tabs{

            width:800px;

            margin:150px auto;

        }

        .tab-header {

            position: relative;

            height: 40px;

            line-height: 40px;

            background: #fafafa;

            border-bottom: solid 2px #39AEF5;

            overflow: hidden;

        }

 

        .tab-left, .tab-right {

            position: absolute;

            top: 0;

            width: 40px;

            height: 40px;

            text-align: center;

            color: #888;

            background-color: #ffffff;

            cursor: pointer;

            z-index: 1000;

        }

 

        .tab-left {

            left: 0;

            border-right: solid 1px #eee;

        }

 

        .tab-right {

            right: 0;

            border-left: solid 1px #eee;

        }

 

        .tabs-wrap {

            position: relative;

            overflow: hidden;

            margin: 0 40px;

        }

        .tabs-wrap ul{

            list-style-type: none;

            height: 40px;

            margin: 0;

            padding: 0;

            font-size: 14px;

            width: 5000px;

        }

        .tabs-wrap ul li {

            float: left;

            display: inline-block;

        }

        .tabs-wrap ul li a {

            display: block;

            border-right: solid 1px #eee;

            padding: 0 15px;

            color: #888;

        }

 

        .tabs-wrap ul li.active a{

            background-color: #39AEF5;

            color: #fff;

        }

        .tabs-wrap ul li a:hover{

            text-decoration: none;

        }

    </style>

</head>

<body>

    <div class="tabs" id="tabs">

        <!--标签页导航条-->

        <div class="tab-header">

            <!--左边按钮-->

            <a class="tab-left">

                <i class="fa fa-backward"></i>

            </a>

            <!--右边按钮-->

            <a class="tab-right">

                <i class="fa fa-forward"></i>

            </a>

            <div class="tabs-wrap">

                <!--标签页内容-->

                <ul class="tabs-content">


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1896.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • 实现
  • 一个
  • 如何
  • 效果
  • 菜单