用图形替换文本链接（导航）

Posted 2023-05-08

【中文标题】用图形替换文本链接（导航）

【英文标题】：replace text link with graphic (navigation)

【发布时间】：2016-04-03 19:23:25

【问题描述】：

我正在使用 wordpress、bootstrap 和 fontawesome 来创建导航。它固定在屏幕顶部，当用户滚动类时，shrink 会被添加到具有不同 css 值的标题类中。

添加类后，我希望标题中的文本链接变成图标（fontawesome）尝试使用显示/隐藏 css，但我无法直接对链接进行硬编码，因为它们是由 wordpress 生成的。

html - 导航

<div class="navbar-collapse collapse navbar-right">
    <?php /* Primary navigation */
        wp_nav_menu( array(
            'menu' => 'top_menu',
            'depth' => 2,
            'container' => false,
            'menu_class' => 'nav navbar-nav',
            //Process nav menu using our custom nav walker
            'walker' => new wp_bootstrap_navwalker())
        );
    ?>
</div>

css

.navbar-custom .nav>li>a 
    font-size: 1.15em;
    font-weight: 400;
    etc...

编辑 - 如问题中所述，我无法直接对链接进行硬编码，因为它是由 wordpress 处理的

head html - 应用 'shrink' 类

 $(function()
  var shrinkHeader = 100;
 $(window).scroll(function() 
  var scroll = getCurrentScroll();
  if ( scroll >= shrinkHeader ) 
       $('header').addClass('shrink');
    
    else 
        $('header').removeClass('shrink');
    
  );

【问题讨论】：

只需使用 javascript 来查看 shrink 何时添加到头类中，然后通过 JS 进行转换 - 这不应该通过 PHP imo 完成...

你能展示一些示例编译的 HTML 吗？

在浏览器中打开你的网页，复制生成的导航栏的html放到问题里面，这样我们就可以根据它工作了

最简单的方法是使用this插件来始终在菜单文本旁边显示图标。然后有 JS 函数在添加 shrink 类时删除文本（并留下图标）

【参考方案1】：

编辑

这可能是一种更好的方法，因为您只需更改 CSS 而不是 html 的显示...也可以减少循环。

jQuery

$(document).ready(function() 
        $(".nav li a .fa").css("display", "none");
        $(".nav li").each(function()  
            if(this.hasClass("home")) 
                //add icons to your html so you can hide them
                this.html("<a href='homeurl'><i class='fa fa-home'></i> <span class='text'>Home</span></a>");
            
            else if(this.hasClass("next-unique-class")) 
                this.html("some other icon");
            
            //more else ifs for each nav icon you want to add
        
);

$(window).scroll(function() 
    //Apply and remove the shrink class depending on if you're at the
    //top of the page or not. Not sure if you have this or not.
    if($(window).scrollTop() == 0) 
        $("your #header-id or .header-class").removeClass("shrink");
    
    else 
        $("your #header-id or .header-class").addClass("shrink");
    

    //Hide icon and display text or vice versa
    if(".header").hasClass("shrink")  
        $(".nav li a .fa").css("display", "inline");
        $(".text").css("display", "none");
    
    else 
        $(".nav li a .fa").css("display", "none");
        $(".text").css("display", "inline");
    
);

原帖

这可能有点牵强，因为我没有经常使用 WordPress，但我相信（根据source）每个 li 都会有自己的类。使用 JQuery，您可以在用户像这样滚动时应用检查：

jQuery

$(window).scroll(function() 
    //Apply and remove the shrink class depending on if you're at the
    //top of the page or not. Not sure if you have this or not.
    if($(window).scrollTop() == 0) 
        $("your #header-id or .header-class").removeClass("shrink");
    
    else 
        $("your #header-id or .header-class").addClass("shrink");
    

    //Go through each li in the nav
    $(".nav li").each(function()  
        //If header has shrink, replace this li's text with an icon
        //depending on its unique class
        if($("your #header-id or .header-class").hasClass("shrink") 
            if(this.hasClass("home")) 
                //random icon
                this.html("<a href='homeurl'><i class='fa fa-home'></i></a>");
            
            else if(this.hasClass("next-unique-class")) 
                this.html("some other icon");
            
            //more else ifs for each nav icon you want to replace
        

        else 
            //Check which li this is and put back original 
            //text if the header does not have shrink
            if(this.hasClass("home")) 
                this.html("Original Home Link + text"); 
            
            else if(this.hasClass("next-unique-class")) 
                this.html("Original Link + text");
            
            //more else ifs for each
        

    );
);

这真的很粗糙，我目前无法对其进行测试，但希望它可以在某种程度上对您有所帮助。我非常怀疑它是否可以 100% 解决您的问题，即使您输入了正确的类和 ID，它也可能需要进行一些调整。如果您提供更多信息，我可以尝试提供更多帮助。

【参考方案2】：

您只需使用 CSS 即可。您需要的是样式规则，这些规则将根据具有shrink 类的元素的存在进行处理。如果它存在于标题中，则样式会将链接font-size 属性设置为零以“隐藏”文本，并将使用::before 选择器设置content 属性和font-size 中的图标图标，这样它们就不会以之前设置的零大小“隐藏”。

由于您将有多个链接，您可能需要使用:nth-child 来正确设置每个图标。

查看示例 (here is the jsfiddle)：

CSS

/* set the font size of the link to zero to 'hide' the text */
.shrink a

  font-size: 0px;


/* set the font size of the icons to override the 0px of the previous rule */
.shrink a::before

  font-size: 20px;


/* set the icon of the first menu entry */
.shrink a:nth-child(1)::before

  content: "@";


/* set the icon of the second menu entry */
.shrink a:nth-child(2)::before

  content: "#";


/* and so on... */

这是一个运行良好的 HTML 示例：

HTML

<!-- when you put the 'shrink' class here the magic occurs -->
<div class="nav">
  <a href="#">Entry 1</a>
  <a href="#">Entry 2</a>
</div>

* * * 编辑 * * *

由于nth-child 是一个 CSS3 选择器，一些旧的 - 但仍处于活动状态 - 浏览器可能无法正确支持它，您可以检查您是否能够将图标设置为每个菜单链接中的数据属性，以便我们可以替换此选择器具有以下 css 规则：

CSS

/* set the font size of the link to zero to 'hide' the text */
.shrink a

  font-size: 0px;


/* set the icon and font size to override the 0px of the previous rule */
.shrink a::before

  font-size: 20px;
  content: attr(data-icon);

HTML

<!-- when you put the 'shrink' class here the magic occurs -->
<div class="nav">
  <a href="#" data-icon="@">Entry 1</a>
  <a href="#" data-icon="#">Entry 2</a>
</div>