jquery - 在桌面版本中，如何删除响应式导航栏上的超赞字体图标？

标签 jquery html css

在桌面版本中，如何删除响应式导航栏上的超赞字体图标？在我下面的元素中，一切正常，但是当网站是桌面版时就会出现问题，因为我不希望我的 Font Awesome 图标显示在那里。在他们创建的名为 (site-nav--icon) 的类的 CSS 中，我已将显示设置为无，但它仍然无法正常工作。一些帮助将不胜感激。提前致谢。

@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
    
    body{
        background: #F0F8EA;
        font-family: 'Quicksand', sans-serif;
    }
    .container{
        width: 95%;
        max-width: 1000px;
        margin: 0 auto;
    }
    header{
        background: #E54B4B;
        color: #EBEBD3;
        padding: 1em 0;
        position: relative;
    }
    header::after{
        content: '';
        clear: both;
        display: block;
    }
    .logo{
        float: left;
        font-size: 1.65rem;
        margin: 0;
        font-weight: 700;
    }
    .site-nav{
        position: absolute;
        top: 100%;
        right: 0%;
        background: #464655;
        clip-path: circle(0px at top right);
        transition: clip-path ease-in-out 700ms;
        /* display: none; */
    }
    .site-nav--open{
        clip-path: circle(100%);
    }
    .site-nav ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .site-nav li{
        border-bottom: 1px solid #575766;
    }
    .site-nav li:last-child{
        border-bottom: none;
    }
    .site-nav a{
        color: #EBEBD3;
        display: block;
        padding: 2em 6em;
        text-transform: uppercase;
        text-decoration: none;
    }
    .site-nav a:hover,
    .site-nav a:focus{
        background: #E4B363;
        color: #464655;
    }
    .site-nav--icon{
        display: inline-block;
        font-size: 1.5em;
        margin-right: 1em;
        width: 1.5em;
        text-align: right;
        color: rgba(255,255,255,.4);
    }
    .menu-toggle{
        padding: 1em;
        position: absolute;
        top: .75em;
        right: .75em;
        cursor: pointer;
    }
    .hamburger,
    .hamburger::before,
    .hamburger::after{
        content: '';
        display: block;
        background: #EBEBD3;
        height: 3px;
        width: 1.95em;
        border-radius: 3px;
        transition: all ease-in-out 500ms;
    }
    .hamburger::before{
        transform: translateY(-7px);
    }
    .hamburger::after{
        transform: translateY(4px);
    }
    .open .hamburger{
        transform: rotate(45deg);
    }
    .open .hamburger::before{
        opacity: 0;
    }
    .open .hamburger::after{
        transform: translateY(-3px) rotate(-90deg);
    }
    @media (min-width: 1077px){
        .menu-toggle{
            display: none;
        }
        .site-nav{
            height: auto;
            position: relative;
            background: transparent;
            float: right;
            clip-path: initial;
        }
        .site-nav li{
            display: inline-block;
            border: none;
        }
        .site-nav a{
            padding: 0;
            margin-left: 1.4em;
        }
        .site-nav a:hover,
        .site-nav a:focus{
            background: transparent;
        }
        .site-nav--icon{
            display: none;   
        }
    }
<!DOCTYPE html>
    <html>
    <head>
        <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>Page Title</title>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">    
        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script type='text/javascript'>
            $(document).ready(function(){
                $('.menu-toggle').click(function(){
                    $('.site-nav').toggleClass('site-nav--open');
                    $(this).toggleClass('open');
                })
            })
        </script>
    </head>
    <body>
        <header>
        <div class="container">
            <h1 class="logo">SakaHapa</h1>
            <nav class="site-nav">
                <ul>
                    <li><a href=""><i class="fa fa-home site-nav--icon"></i>Home</a></li>
                    <li><a href=""><i class="fa fa-question-circle-o site-nav--icon"></i>How It Works</a></li>
                    <li><a href=""><i class="fa fa-user-circle site-nav--icon"></i>Profile</a></li>
                    <li><a href=""><i class="fa fa-cart-plus site-nav--icon"></i>Purchases</a></li>
                    <li><a href=""><i class="fa fa-eye site-nav--icon"></i>Popular</a></li>
                    <li><a href=""><i class="fa fa-envelope site-nav--icon"></i>Contact</a></li>
                </ul>
            </nav>
            <div class="menu-toggle">
                <div class="hamburger"></div>
            </div>
        </div>
        </header>
    </body>
    </html>

最佳答案

这是你的代码，没有用于桌面的很棒的字体图标

@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
    
    body{
        background: #F0F8EA;
        font-family: 'Quicksand', sans-serif;
    }
    .container{
        width: 95%;
        max-width: 1000px;
        margin: 0 auto;
    }
    header{
        background: #E54B4B;
        color: #EBEBD3;
        padding: 1em 0;
        position: relative;
    }
    header::after{
        content: '';
        clear: both;
        display: block;
    }
    .logo{
        float: left;
        font-size: 1.65rem;
        margin: 0;
        font-weight: 700;
    }
    .site-nav{
        position: absolute;
        top: 100%;
        right: 0%;
        background: #464655;
        clip-path: circle(0px at top right);
        transition: clip-path ease-in-out 700ms;
        /* display: none; */
    }
    .site-nav--open{
        clip-path: circle(100%);
    }
    .site-nav ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .site-nav li{
        border-bottom: 1px solid #575766;
    }
    .site-nav li:last-child{
        border-bottom: none;
    }
    .site-nav a{
        color: #EBEBD3;
        display: block;
        padding: 2em 6em;
        text-transform: uppercase;
        text-decoration: none;
    }
    .site-nav a:hover,
    .site-nav a:focus{
        background: #E4B363;
        color: #464655;
    }
    .site-nav--icon{
        display: inline-block;
        font-size: 1.5em;
        margin-right: 1em;
        width: 1.5em;
        text-align: right;
        color: rgba(255,255,255,.4);
    }
    .menu-toggle{
        padding: 1em;
        position: absolute;
        top: .75em;
        right: .75em;
        cursor: pointer;
    }
    .hamburger,
    .hamburger::before,
    .hamburger::after{
        content: '';
        display: block;
        background: #EBEBD3;
        height: 3px;
        width: 1.95em;
        border-radius: 3px;
        transition: all ease-in-out 500ms;
    }
    .hamburger::before{
        transform: translateY(-7px);
    }
    .hamburger::after{
        transform: translateY(4px);
    }
    .open .hamburger{
        transform: rotate(45deg);
    }
    .open .hamburger::before{
        opacity: 0;
    }
    .open .hamburger::after{
        transform: translateY(-3px) rotate(-90deg);
    }
    @media (min-width: 1077px){
        .menu-toggle{
            display: none;
        }
        .site-nav{
            height: auto;
            position: relative;
            background: transparent;
            float: right;
            clip-path: initial;
        }
        .site-nav li{
            display: inline-block;
            border: none;
        }
        .site-nav a{
            padding: 0;
            margin-left: 1.4em;
        }
        .site-nav a:hover,
        .site-nav a:focus{
            background: transparent;
        }
        .site-nav li .fa{
            display: none;   
        }
    }
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<script type='text/javascript'>
            $(document).ready(function(){
                $('.menu-toggle').click(function(){
                    $('.site-nav').toggleClass('site-nav--open');
                    $(this).toggleClass('open');
                })
            })
        </script>

        <header>
        <div class="container">
            <h1 class="logo">SakaHapa</h1>
            <nav class="site-nav">
                <ul>
                    <li><a href=""><i class="fa fa-home site-nav--icon"></i>Home</a></li>
                    <li><a href=""><i class="fa fa-question-circle-o site-nav--icon"></i>How It Works</a></li>
                    <li><a href=""><i class="fa fa-user-circle site-nav--icon"></i>Profile</a></li>
                    <li><a href=""><i class="fa fa-cart-plus site-nav--icon"></i>Purchases</a></li>
                    <li><a href=""><i class="fa fa-eye site-nav--icon"></i>Popular</a></li>
                    <li><a href=""><i class="fa fa-envelope site-nav--icon"></i>Contact</a></li>
                </ul>
            </nav>
            <div class="menu-toggle">
                <div class="hamburger"></div>
            </div>
        </div>
        </header>

关于jquery - 在桌面版本中，如何删除响应式导航栏上的超赞字体图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58232219/

上一篇：html - 如何将 handlebars 表达式包装在 span 标签中，并使 span 标签可点击？

下一篇：javascript - 如何使搜索列表更短？

相关文章：

javascript - Jquery CSS 在另一个容器中单击时显示当前 div

javascript - 使用ajax显示来自url的JSON数据

html - 如何将两个图像对齐到彼此之上

javascript - 弹出框无法正常关闭

javascript - 使用最少 JS 的 contenteditable div 占位符

javascript - 为订阅框创建透明背景

javascript - 如何在使用 jQuery 按下后保持按钮处于事件状态

javascript - 使用 jQuery/javascript 进行 HTML 表格转换

css - 将鼠标悬停在 DIV 上时如何防止下方的 DIV 向上滑动

html - 在将实际图像加载到框架之前，如何根据 CSS 使浏览器缩放图像框架？

©2024 IT工具网  联系我们