css - 带有主页链接的自定义 Logo

Question

如果我们向下滚动，我很难添加带有导航栏链接的自定义 Logo

是类“下拉菜单下拉反转”

网站:http://its-skin.upgates.com

CSS:

.secondlogo {
background-image: url(http://static.its-skin.upgates.com/m/m57daee4256187-sublogo.png);
width: 250px;
height: 54px;
margin-left: auto;
margin-right: auto;
}

完整代码如下:

<ul class="nav navbar-nav top-menu top-menu-categories">
    {else}
        <ul class="dropdown-menu dropdown-inverse" data-designer="d1-2-2-1">
    {/if}
        {foreach $tree as $category}
            <li class="ct_{$category['category_id']} lev-{$level}{if $category['active']} active{/if}{if count($category['childs'])} dropdown{if $level > 1} dropdown-submenu{/if}{/if}" data-target-category="{$category['target_category_id']}">
                <a href="{$category['url']}"{if $category["blank_yn"]} target="_blank"{/if} class="TopMenuLink">
                    {$category['name']}
                    {if (count($category['childs']))}
                        <i class="caret"></i>
                    {/if}
                </a>
                {if count($category['childs'])}
                    <button class="btn SubcategoriesLink"><i class="fa fa-chevron-right"></i></button>
                {/if}
                {include #desktopMenu tree => $category['childs'], level => $level + 1, option => false, colsCount => ceil(count($category['childs'])/$itemsInCol)}
            </li>
        {/foreach}
    </ul>

Answer 1

您可以在包含链接的 ul 开头添加另一个列表元素

    <ul class="nav navbar-nav top-menu top-menu-categories">

     <!-- New Element with class logolink -->      
      <li class="ct_29 lev-1 logolink">
       <a href="http://its-skin.upgates.com/" class="TopMenuLink">
         Link                   
       </a>
       </li>
       <li class="ct_29 lev-1" data-target-category="29">
       <a href="http://its-skin.upgates.com/krasa-it-s-skin" class="TopMenuLink">
       Krása It's Skin
       </a>
       </li>
                    ...
      </ul>

然后用css把你的logo放在前面就行了

.logolink {
    background-image: url(http://placehold.it/16x16/ff0000);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px; /* Adjust to your logo size*/
}

例子:

如果您只想要一个没有文本的可点击 Logo 图像，请将其包裹在超链接内 <a href="#"><img src="#" /></a>忘记 css 中的背景图像。

编辑:

如果您想要在用户滚动您的页面时出现淡入效果，请查看这两个提供此功能的优秀 jquery 库。

• > http://scrollmagic.io/
• > http://johnpolacek.github.io/scrollorama/

或者您可以使用一些 jquery 代码淡入淡出。因此，通过将其不透明度设置为 0 来隐藏 Logo (元素)，检测视口(viewport)滚动并在某个点淡入。在这里找到一个工作示例: https://jsfiddle.net/mwtebtw9/1/

代码取自:http://www.ordinarycoder.com/jquery-fade-content-scroll/