我正在使用Bootstrap创建一个网站,并有一个菜单,在菜单中显示图标 . 单击菜单按钮时,文本将显示在每个图标旁边,并将菜单向左推,以便文本适合 .
<div id="wrapper">
<div id="sidebar">
<a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div id="title-text">
<a href="#section1" class="smoothScroll"><h3>Title</h3></a>
</div>
<!-- <div id="logo"> <a href="/"><img src="img/logo.svg" alt="logo" /></a> </div> -->
<nav id="nav" class="navigation" role="navigation">
<ul class="newnav">
<li class="active" data-section="1"><i class="icon-home"></i> <span>Home</span></li>
<li data-section="2" class=""><i class="icon-user"></i> <span>About</li>
<li data-section="3" class=""><i class="icon-laptop"></i> <span>Projects</span> </li>
<li data-section="4" class=""><i class="icon-pencil"></i> <span>Social</span> </li>
<li data-section="5" class="last"><i class="icon-envelope"></i> <span>Contact</span> </li>
</ul>
</nav><!-- /nav -->
</div><!-- /sidebar -->
目前, Span 扩展到让文本进入,它工作正常,但我希望它是动画的 .
这是目前为止的大部分代码,尽管实时视图不起作用 .
如您所见,当单击左上角按钮(.btn-navbar)时,.expand CSS启动并将宽度从0更改为auto . 我基本上需要同样的东西,但动画,但无法弄清楚我的生活 .
有人能指出我正确的方向吗?
亲切的问候,汤姆
1 回答
您无法使用CSS或本机Jquery为
auto
设置动画(至少在我上次检查时)但是有一个JS / JQ方法
http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/