javascript - 从导航后面滑出文本

标签 javascript jquery html css

首先让我说我开始意识到我需要学习 jQuery,虽然我在这里寻求帮助,但这个周末我将努力播放 Treehouse jQuery 视频。

如果您看一下我制作的 fiddle ,请对我尝试使用导航菜单创建的效果提供一些帮助: http://jsfiddle.net/number8pie/kvMkF/4/

如您所见,有一个导航链接列表,上面是与链接对应的文本。我想要的是除了屏幕阅读器之外的任何人最初都无法查看该文本,并且当用户将鼠标悬停在链接上时,相应的文本从最左边的列表项后面滑动到可见状态,并且文本显示“导航”消失。我希望所有文本都从最初所在的位置滑动到“导航”文本所在的同一位置。

我对仅使用 CSS(不要认为仅使用 CSS)、jQuery 或 JavaScript 的解决方案持开放态度。

在此先感谢您的帮助,我会确保尽快开始学习 jQuery。

代码如下:

HTML:

<nav class="main-nav">
    <p class="nav-hvr-init">Navigate</p>
    <ul> <!-- no closing tag on <li> so that the whitespace between elements is removed-->
        <li id="about-us">
            <a class="nav-link" href="#"></a>
            <span class="nav-text">about us</span>
        <li id="products">
            <a class="nav-link" href="#"></a>
            <span class="nav-text">products</span>
        <li id="the-team">
            <a class="nav-link" href="#"></a>
            <span class="nav-text">the team</span>
        <li id="environment">
            <a class="nav-link" href="#"></a>
            <span class="nav-text">environment</span>
        <li id="contact">
            <a class="nav-link" href="#"></a>
            <span class="nav-text">contact</span>
    </ul>
</nav>

CSS:

#nav-row {
  background-color: #CCFFCC;
}

#nav-col {
  height: 56px;
  padding-top: 0;
  background-color: #336600;
}

.main-nav {
  height: 56px;
  margin: 0 auto;
  background-color: #336600;
  position: relative;
}

.main-nav ul li {
  height: 56px;
  width: 56px;
  margin: 0;
  font-size: 21px;
  display: inline-block;
  text-transform: uppercase;
}

#about-us {
  background: #66CC66 url('http://s10.postimg.org/xqx00ofzp/about_us.png') no-repeat center;
}

#about-us:hover {
  background: #66CC66 url('http://s10.postimg.org/9borzmh2t/about_us_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

#about-us:active {
  background: #66CC66 url('http://s10.postimg.org/ekjsxhzhx/about_us_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in-out;
  -moz-transition: all 50ms ease-in-out;
  -o-transition: all 50ms ease-in-out;
  transition: all 50ms ease-in-out;
}

#products {
  background: #33CC33 url('http://s10.postimg.org/defsypb79/products.png') no-repeat center;
}

#products:hover {
  background: #33CC33 url('http://s10.postimg.org/y2j1r6lth/products_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

#products:active {
  background: #33CC33 url('http://s10.postimg.org/6p99iopv9/products_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in-out;
  -moz-transition: all 50ms ease-in-out;
  -o-transition: all 50ms ease-in-out;
  transition: all 50ms ease-in-out;
}

#the-team {
  background: #339900 url('http://s10.postimg.org/4sh4ruol1/the_team.png') no-repeat center;
}

#the-team:hover {
  background: #339900 url('http://s10.postimg.org/buf2e1s6t/the_team_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

#the-team:active {
  background: #339900 url('http://s10.postimg.org/wd9yj4645/the_team_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in-out;
  -moz-transition: all 50ms ease-in-out;
  -o-transition: all 50ms ease-in-out;
  transition: all 50ms ease-in-out;
}

#environment {
  background: #006600 url('http://s10.postimg.org/gb7fcq6et/environment.png') no-repeat center;
}

#environment:hover {
  background: #006600 url('http://s10.postimg.org/n47s8zx85/environment_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

#environment:active {
  background: #006600 url('http://s10.postimg.org/6y6u8m2np/environment_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in-out;
  -moz-transition: all 50ms ease-in-out;
  -o-transition: all 50ms ease-in-out;
  transition: all 50ms ease-in-out;
}

#contact {
  background: #003300 url('http://s10.postimg.org/9pq3z816d/contact.png') no-repeat center;
}

#contact:hover {
  background: #003300 url('http://s10.postimg.org/udordymet/contact_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

#contact:active {
  background: #003300 url('http://s10.postimg.org/4scje3z79/contact_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in-out;
  -moz-transition: all 50ms ease-in-out;
  -o-transition: all 50ms ease-in-out;
  transition: all 50ms ease-in-out;
}

.main-nav > ul {
  height: 56px;
  line-height: 100%;
  margin: 0;
  position: relative;
  float:right;
  padding: 0;
}

li > svg {
  margin: 9% 0 0 11%;
}

li > a {
  display: block;
  padding: 0;
  margin: 0;
}

.nav-link {
  margin: 0;
  height: 56px;
}

.nav-text {
  color: #FFFFFF;
  font-family: 'Arial Black';
  font-size: 21px;
  position: absolute;
  left: 0;
  bottom: 0;
}

.nav-hvr-init {
  color: #FFFFFF;
  font-family: 'Arial Black';
  font-size: 21px;
  text-transform: uppercase;
  line-height: 100%;
  margin-right: 4px;
  margin-bottom: 0;
  position: absolute;
  right: 280px;
  bottom: 0px;
  opacity: 0.2;
}

.txt-arrows {
  font-family: 'Arrows';
  font-size: 18px;
  text-transform: none;
  margin-bottom: 3px;
  margin-left: 4px;
}

最佳答案

怎么样?这是你想要的吗?

我还添加了 sr-only 类(来自 Bootstrap)。

http://jsfiddle.net/kvMkF/8/

$( ".nav-link" ).hover(
    function() {
    var text = $( this ).siblings( "span" ).html();   
          $(".nav-hvr-init")
          .stop()
          .animate({right: '0px'},200,function() {
              $(this).html(text).animate({right:'280px'},200);
          });
  }, function() {
      $(".nav-hvr-init")
            .stop()
            .animate({right: '0px'},200,function() {
                $(this).html('Navigate').animate({right:'280px'},200);
            });
  }
);

关于javascript - 从导航后面滑出文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24822692/

相关文章:

javascript - 在子站点/子文件夹中找不到 SVG href ID

javascript - 如何使用qgis生成的自定义 map json在highmaps中实现mapbubble?

javascript - 如何在表格行中生成动态按钮并在单击按钮时打开新页面

javascript - 使用 javascript 将自定义类添加到 Markdown 创建的所有表中

javascript - 选择“更改时”无法正常工作

javascript - 如何评估我的 Web 应用程序中的用户代码输入

Javascript - 如何选择多个文件并加载到 div 中

javascript - 使用 Vuex 在 Vue 应用程序中高效地处理大型数据集

javascript - 制作与当前日期和时间相匹配的单元格,某种颜色

javascript - 使用 setTimeout 在无限循环中创建