Question

我尝试为搜索，语言和联系选项创建一个小标题导航。（以下演示）

所有元素都是可点击的。我无法管理内容滑入，移动其他图标并在单击任何其他元素时向后滑动。

PS：搜索栏已经在我的jquery，jquery ui文档中使用滑入和向后（在JSFiddle上不起作用，不知道为什么..，但是p标签不会滑入。搜索栏正在使用代码像这样：

$(function () {
      $(".lupeIcon").click(function (){
            $(".searchField").addClass("searchFieldWidthExtender",2000)
            $(".telefonField").hide("slide", {direction: "right"}, 2000);
            $(".globusField").hide("slide", {direction: "right"}, 2000);

  });
        });

）

这是代码

HTML：

    <body>
 <nav>
<div class="navIcon telefonIcon"><p class="telefonField">12 346 5</p><i class="fa fa-phone" aria-hidden="true"></i></div>
<div class="navIcon lupeIcon"><input class="searchField" type="text" name="search"><i class="fa fa-search" aria-hidden="true"></i></div>
<div class="navIcon globusIcon"><p class="globusField">DE | EN</p><i class="fa fa-globe" aria-hidden="true"></i></div>
                </nav>

                </body>

CSS：

div.navIcon{
    float: left;
    margin: 0 40px 0 0;
    line-height: 95px;
    padding: 0;
    font-size: 20px;
    color: red;
        -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    display: -webkit-box; 
}
.searchField {
    display: none;
    height: 30px;
    margin: 0 10px 0 0;
    border: none;
    border-radius: 30px;
    box-shadow: inset 0 0 2px red;

}

.telefonField, .globusField { 
    display: none;
    height: 30px;
    margin: 0 10px 0 30px;
    vertical-align: middle;

}

使用Javascript：

     $(".telefonIcon").click(function (){
            $(".telefonField").addClass("displayInliner",2000)
            $(".telefonField").show("slide", {direction: "right"}, 2250);
            $(".searchField").hide();
            $(".globusField").hide("slide", {direction: "right"}, 2000);
  });

      $(".lupeIcon").click(function (){
            $(".searchField").addClass("searchFieldWidthExtender",2000)
            $(".searchField").show("slide", {direction: "right"}, 2250);
            $(".telefonField").hide("slide", {direction: "right"}, 2000);
<!--        $(".globusField").hide("slide", {direction: "right"}, 2000); -->            
                        $(".globusField").hide();

  });
      $(".globusIcon").click(function (){
            $(".globusField").addClass("displayInliner",2000)
            $(".globusField").show("slide", {direction: "right"}, 2250);
            $(".telefonField").hide("slide", {direction: "right"}, 2000);
            $(".searchField").hide("slide", {direction: "right"}, 2000);

  });

Demo with Icons

Answer 1

我处理了您的联系人菜单动画我玩得很开心。
我这样做是因为我觉得你想要的效果很棒......

你会注意到我经常更改你的代码我真的不知道如何逐一解释所有的变化，所以随时问。

查看我的CodePen

的 HTML

<body> <nav> <div class="field telefonField">12 346 5</div> <div class="navIcon telefonIcon"> <i class="fa fa-phone" aria-hidden="true"></i> </div> <div class="field searchField"> <input type="text" name="search"> </div> <div class="navIcon lupeIcon"> <i class="fa fa-search" aria-hidden="true"></i> </div> <div class="field globusField">DE | EN</div> <div class="navIcon globusIcon"> <i class="fa fa-globe" aria-hidden="true"></i> </div> </nav> </body>

的 CSS

div.navIcon { float: left; line-height: 95px; padding: 0; font-size: 20px; color: red; } .fa{ float: left; line-height: 95px; color: red; padding: 0 6px; } .telefonField, .searchField, .globusField { float:left; display:none; width: 0; margin: 0; color: red; white-space:nowrap; overflow:hidden; line-height: 95px; } .searchField input{ border: none; width:0px; border-radius: 30px; box-shadow: inset 0 0 2px red; outline: none; padding: 0.3em 0.5em 0.1em 0.7em; }

的的jQuery

var showDelay = 2000; var hideDelay = 2000; // If you want to set a different hide delay var thisWidth = 0; // Element width are different var searchField = false; // For the input exception $(".navIcon").click(function(){ // Execute script only if «this» is not already displayed if( $(this).prev(".field").css("width") == "0px" ){ if( $(this).prev(".field").hasClass("telefonField") ){ thisWidth = "63px"; searchField = false; } if( $(this).prev(".field").hasClass("searchField") ){ thisWidth = "248px"; searchField = true; } if( $(this).prev(".field").hasClass("globusField") ){ thisWidth = "59px"; searchField = false; } // Show it! $(this).prev(".field").animate({width:thisWidth},showDelay).show(); // Hide the others $(".field").not( $(this).prev(".field") ).animate({width:"0px"},hideDelay,function(){ $(this).hide(); }); // Also animated the input width... if(searchField){ $(".searchField input").show().animate({width:"225px"},showDelay); } } });

切换向右和向左滑动元素组Javascript

1 个答案: