搜索框:思路

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

我们设计的导航栏现在有两个状态,一个是正常状态 ... 一个是搜索状态 .. 点击正常状态下面的搜索小图标,会隐藏导航栏上的图标还有菜单,然后会显示一个搜索框 ..

这需要我们去写几行 JavaScript .. 我们可以用 JavaScript 找到这个小图标元素 ... 然后去监听它的点击事件,就是如果有人点了它,我们就去做出一些反应 ..

比如可以把这个小图标换成一个关闭小图标 .. 然后我们可以动态的在导航栏的内容包含的上面添加一个 css 类 ..

配合一些 css 的变形还有过滤的效果,可以去隐藏或者显示页面上的特定的元素 ..

也就是,在正常状态下的导航栏,点了它的搜索图标,会把小图标换成一个关闭图标,隐藏标志还有菜单,显示一个搜索表单 ..

点了搜索状态的导航栏上的关闭图标,会把它变成关闭图标,同时隐藏搜索框,显示导航上的标志还有菜单 ...

搜索框:思路《 网页设计案例:导航栏 》

统计

13799
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点