优艾设计网

二级导航条怎么写啊??

优艾设计网 https://www.uibq.com 2022-12-30 11:12 出处:网络 作者:PS入门教程
我想问下,二级导航条怎么写啊,在线优艾设计网_Photoshop论坛等。。。朱琳 2021-05-15 20:59
我想问下,二级导航条怎么写啊,在线优艾设计网_Photoshop论坛等。。。
朱琳 2021-05-15 20:59

首先我们先来确定一下要做到什么样才能到达自己想要的效果,而在修改之前我们先来看一下目标吧!这样方便接下来的修改:

想要看到效果首先就是现在后台添加好一级栏目和二级栏目,这样做出更改以后才能看到效果。打开后台---登录---选择左上方界面----导航设置---添加主导航---添加二级导航

最终的效果就是添加一个主导航然后再在主导航里添加两三个二级导航,这样在你接下来的修改才能看到明显的效果。

这一步就是设置二级导航的样式,也就是图片的箭头所指的位置,这里可设置成1、菜单样式,2、横排样式,两种效果,这两种效果具体什么样的我就不说了,在这主要是图片中框中的,这里最好有链接,加上链接后样式文件中的a才能起到相应的效果:

做完第四步后更新一下缓存,到前台刷新一下就能看到效果了。但是你很可能选择横排发现没效果,但是不用担心,这个问题你可以去源码中实现,找到common.css文件(图片中已经显示中去那些文件夹里找)

然后用DW打开文件(如果你不知道这个软件就用记事本打开也行),用查找工具找到 .p_pop li 然后在后面的括号内加上: float:left; border-right:1px solid #666; padding-left:5p优艾设计网_PS百科x; padding-right:5px;

做到这一步基本上就完成了,如果你还想要加一下自己想要的效果的话可以在图片中的代码中更改,绝对能达到你想要的效果的(前台你懂那些代码)。


cara 2021-05-15 21:04

这个都不用js的,有hover就好了,先把右边的div放在那里,给设置display:none,在左边div:hover给设置display:blo优艾设计网_平面设计ck;在顺便改个图片就好了


刘国锋 2021-05-15 21:09

优艾设计网_设计百科 你这个就是一个矛盾了,我建议要么就纵向的。要么就不要考虑居中了 你要是说居中的话 假如联系我们下面的二级较多的话,你居中肯定会撑开的。联系我们那里右浮动吧!


康焕卉 2021-05-15 21:09

优艾设计网_设计模板 你的意思是什么?鼠标划到导航上,然后下面出来一列子导航的效果吗?


李小丽 2021-05-15 21:13

一级菜单_01

二级菜单_01

二级菜单_02


扒姨扒 优艾设计网_设计客 2021-05-15 21:14

建议楼主改一下主体结构 一级菜单 二级菜单 二级菜单 一级菜单 二级菜单 二级菜单 把一级菜单的li设置为相对定位,把二级菜单的ul设置为绝对定位并隐藏,然后在js中写 $("#menu>li").hover(function(){ $(this).find("ul").show(); },function()


0

精彩评论

暂无评论...
验证码 换一张
取 消