首页 >> 升级体验 >>展示型网站 >> 拖拽版导航、下拉菜单设置多行
详细内容

拖拽版导航、下拉菜单设置多行

一、多行导航,将普通单行的改为多行(本次演示基础为:拖拽版、屏宽为960px)。

1、  普通导航:

 

说明: C:\Users\Administrator\AppData\Roaming\Tencent\Users\229038765\QQ\WinTemp\RichOle\1BZL804KG2CD2D2H1H`)XVJ.png

 

         2、多行效果图1

 

B2S[A_AO~G)DQJDP`Z0]]ND.png

 

操作步骤:

1) 首先设置导航样式,将导航样式设置为“空白导航”。

 

 

2) 其次设置导航的样式。注:当您的导航设置为通栏时,外边框也是通栏的效果,内边框为不通栏效果;当您的导航设置为不通栏时内边框和外边框均不通栏。

 

说明: C:\Users\Administrator\AppData\Roaming\Tencent\QQ\Temp\6D82B109015E4D99AD93E76F1825F45E.jpg

 

3) 最后设置导航栏目项,保存即可,参考导航栏目项背景:http://aimg1.ev123.com/ev_user_module_content_tmp/2015_07_14/tmp1436845292_226516_s.png。

 

说明: C:\Users\Administrator\AppData\Roaming\Tencent\QQ\Temp\7AC658D11AC0416EADCB7BFF916BAC8A.png

 

         3、多行效果图2

 

说明: C:\Users\Administrator\AppData\Roaming\Tencent\Users\229038765\QQ\WinTemp\RichOle\]XRHC7CECWEVH[6$FTVX3VN.png

 

         操作步骤:

1)  首先设置导航样式为“空白导航”。

 

 

2)  其次设置导航的样式,参考导航背景图为:

http://aimg1.ev123.com/ev_user_module_content_tmp/2015_07_14/tmp1436860405_878868_s.png

 

说明: C:\Users\Administrator\AppData\Roaming\Tencent\Users\229038765\QQ\WinTemp\RichOle\6I6E`PG_H@L)JE`QWPJQJHS.jpg

 

3)  最后设置导航栏目项的样式,保存即可。

 

说明: C:\Users\ADMINI~1\Desktop\4.jpg

 

         4、多行效果图3

 

`YSIF$QZKS3D_DN1K5O$3GD.png

 

         操作步骤:

1)  首先设置导航样式为“空白导航”。

 

 

2)  其次设置导航的样式,参考背景图片:

http://aimg1.ev123.com/ev_user_module_content_tmp/2015_07_14/tmp1436867173_894012_s.png

 

说明: C:\Users\Administrator\AppData\Roaming\Tencent\QQ\Temp\6D591F08A55A4775A3F58DEFA03980E1.jpg

 

 

3)  最后设置导航栏目项的样式,保存即可。

 

说明: C:\Users\ADMINI~1\Desktop\6.jpg

 

二、下拉菜单样式。

说明: C:\Users\Administrator\AppData\Roaming\Tencent\QQ\Temp\308A6E5415EC4B5EB39381798D224CAF.png

 

1、  设置下拉菜单的样式。

 

 

2、  设置下拉菜单栏目项,保存即可。

 

说明: C:\Users\ADMINI~1\Desktop\7.jpg


seo seo