我们设计的导航栏现在有两个状态,一个是正常状态 ... 一个是搜索状态 .. 点击正常状态下面的搜索小图标,会隐藏导航栏上的图标还有菜单,然后会显示一个搜索框 ..
这需要我们去写几行 JavaScript .. 我们可以用 JavaScript 找到这个小图标元素 ... 然后去监听它的点击事件,就是如果有人点了它,我们就去做出一些反应 ..
比如可以把这个小图标换成一个关闭小图标 .. 然后我们可以动态的在导航栏的内容包含的上面添加一个 css 类 ..
配合一些 css 的变形还有过滤的效果,可以去隐藏或者显示页面上的特定的元素 ..
也就是,在正常状态下的导航栏,点了它的搜索图标,会把小图标换成一个关闭图标,隐藏标志还有菜单,显示一个搜索表单 ..
点了搜索状态的导航栏上的关闭图标,会把它变成关闭图标,同时隐藏搜索框,显示导航上的标志还有菜单 ...