Jimdo网站下拉式导航菜单代码简介

      早期的Jimdo系统菜单,都是以西方人喜欢的竖排为主,当然,改为横排也不难。但是,横排菜单要设计为多级样式的话,除了系统模板外,自定义模板的子菜单都不容易处理好主菜单和子菜单的分离问题,或者说即使能处理好,也不是很合理。这方面的内容,以前曾做过讨论,如《Jimdo多级横排导航菜单分离初探》及《Jimdo多级导航菜单的分离方法》。

      说到网站的导航菜单,本人一直比较喜欢下拉式的,但是,在Jimdo网站上,要简单地对系统菜单进行改造,前几年是不可能的,除非屏蔽掉系统菜单,然后自已用CSS或JS设计。现在好了,Jimdo系统已经支持下拉菜单的设计。做了一下试验,发现现在在Jimdo上实现下拉式菜单非常简单。

      登录后台,进入自定义设计界面,在“html"条目下,可以看到如下关于菜单的选项:

      可以看到,关于导航菜单,现在有三个选项,其中:

      一、navi(sdandard)是标准模式,也就是之前的老式模式,在自定义的html中的形式为:

      <var levels="1,2,3" expand="false" variant="standard" edit="1">navigation</var>

      二、navi(nested)是嵌套模式,可以用来实现下拉菜单,在自定义的html的形式为:

      <var levels="1,2,3" expand="true" variant="nested" edit="1">navigation</var>

      当然,仅仅在html中做以上设置还是不够的,要实现下拉菜单,还需要在CSS里进行样式设计。研究了一下现在新型的系统模板,这里展示一下其中两个采用下拉菜单的CSS设计代码。

      三、navi(breadcrumb)是辅助导航,可以实现在内容的上方加上 主菜单》子菜单 这种效果。在自定义的html中的形式为:

      <var variant="breadcrumb" edit="0">navigation</var>

一、Berlin 模板

截图:

CSS代码:

.cc-nav-level-0{list-style:none;margin:0;padding:0;background-color:inherit}
.cc-nav-level-0li{position:relative;background-color:inherit}
.cc-nav-level-0>li{display:inline-block}
.cc-nav-level-0>li:hover .cc-nav-level-1{display:block}
.cc-nav-level-0>li>a{margin:0;padding:15px 20px;display:inherit}
.cc-nav-level-0 a:link,.cc-nav-level-0 a:visited{color:#434745}
.cc-nav-level-0 a:active,.cc-nav-level-0 a:focus,.cc-nav-level-0 a:hover{background-color:#87c9a3;color:#fcfefc;text-decoration:none}
.cc-nav-level-0 .cc-nav-current>a:link,.cc-nav-level-0 .cc-nav-current>a:visited,.cc-nav-level-0 .cc-nav-parent>a:link,.cc-nav-level-0 .cc-nav-parent>a:visited{background-color:#87c9a3;color:#fcfefc}
.cc-nav-level-1{display:none;left:0;list-style:none;margin:0;padding:0;position:absolute;top:100%;width:250px;z-index:10;background-color:inherit}
.cc-nav-level-1 li{background-color:inherit}

.cc-nav-level-1 li:hover .cc-nav-level-2{display:block}
.cc-nav-level-1 a:link,.cc-nav-level-1 a:visited{display:block;color:#434745;padding:10px}
.cc-nav-level-1 a:active,.cc-nav-level-1 a:focus,.cc-nav-level-1 a:hover{color:#fcfefc}
.cc-nav-level-2{display:none;left:100%;list-style:none;margin:0;padding:0;position:absolute;top:0;width:250px;background-color:inherit;color:inherit}
.cc-nav-level-2 a:link,.cc-nav-level-2 a:visited{color:#434745}
.cc-nav-level-2 a:active,.cc-nav-level-2 a:focus,.cc-nav-level-2 a:hover{color:#fcfefc}

二、Shanghai模板

截图:

CSS代码:

.cc-nav-level-1,.cc-nav-level-2{overflow:hidden;position:absolute;text-align:left;white-space:nowrap;z-index:2}
.cc-nav-level-1 li,.cc-nav-level-2 li{background-color:inherit;display:block;padding:0}
.cc-nav-level-1 a:link,.cc-nav-level-1 a:visited,.cc-nav-level-2 a:link,.cc-nav-level-2 a:visited{background-color:inherit;padding:15px}
.cc-nav-level-1 a:active,.cc-nav-level-1 a:focus,.cc-nav-level-1 a:hover,.cc-nav-level-2 a:active,.cc-nav-level-2 a:focus,.cc-nav-level-2 a:hover{text-decoration:underline}
.cc-nav-current>a:active,.cc-nav-current>a:focus,.cc-nav-current>a:hover,.cc-nav-current>a:link,.cc-nav-current>a:visited,.cc-nav-parent>a:active,.cc-nav-parent>a:focus,.cc-nav-parent>a:hover,.cc-nav-parent>a:link,.cc-nav-parent>a:visited{color:#76cc42}
.cc-nav-level-0{text-align:center}
.cc-nav-level-0 li:hover .cc-nav-level-1{max-height:5000px;overflow:visible;-moz-transition:max-height .4s ease-in;-webkit-transition:max-height .4s ease-in;transition:max-height .4s ease-in}
.cc-nav-level-1{max-height:0;top:100%;-moz-transition:max-height .4s ease-out;-webkit-transition:max-height .4s ease-out;transition:max-height .4s ease-out}
.cc-nav-level-1 li{position:relative}
.cc-nav-level-1 li:hover .cc-nav-level-2{max-width:5000px;overflow:hidden;-moz-transition:max-width .4s ease-in;-webkit-transition:max-width .4s ease-in;transition:max-width .4s ease-in}
.cc-nav-level-1 li:hover .cc-nav-level-2 a:link,.cc-nav-level-1 li:hover .cc-nav-level-2 a:visited{max-width:5000px;overflow:visible;-moz-transition:max-width .4s ease-in;-webkit-transition:max-width .4s ease-in;transition:max-width .4s ease-in}
.cc-nav-level-2{left:100%;max-width:0;top:0;-moz-transition:max-width .4s ease-in;-webkit-transition:max-width .4s ease-in;transition:max-width .4s ease-in}
.cc-nav-level-2 a:link,.cc-nav-level-2 a:visited{max-width:0;overflow:hidden;-moz-transition:max-width .4s ease-in;-webkit-transition:max-width .4s ease-in;transition:max-width .4s ease-in}

      贴这些代码,仅供感兴趣的朋友参考。另,作为演示,把本站的导航菜单也改了一下,还是比较简单的,这里一并留存。

改前:

/* nav */
#nav ul#mainNav2{display:none;}
#nav ul{float:left; list-style:none;}
#nav li{float:left; margin:0px; list-style:none;}
#nav li a{display:block; font:bold 14px/100% verdana,宋体;

text-decoration:none; color:#fff; padding:14px 15px;}
#nav li a:hover{background:#0082db;}
#nav li a.current{background:#006594;}

/*  subnav */
#subnav{float:left; width:240px;}
#subnav #mainNav1 li a.level_1 {display:none !important; font-size:0px;}
ul.mainNav2{margin: 10px 0px 20px 0px; padding:0px; list-style:none;}
ul.mainNav2 li{list-style:none; border-bottom:1px solid #ccc; }
ul.mainNav2 li a

{display:block; font:13px/140% Verdana,宋体; text-decoration:none; padding:4px 0px 4px 4px;}
ul.mainNav2 a:hover{background:#eee; color:black;}
ul.mainNav2 a.current{font-weight:bold; background:#eee; color:black;}

改后:

/*  Navigation */

.cc-nav-level-0{margin:0; padding:0; list-style-type:none; z-index:1000}

.cc-nav-level-0 li{display:inline-block; margin:0; padding:0; position:relative;}

.cc-nav-level-0 li:hover .cc-nav-level-1{display:block;opacity:1;}

.cc-nav-level-0 a:link, .cc-nav-level-0 a:visited

{color:#fff;font:bold 14px/100% verdana,宋体; text-decoration:none; display:block;

padding:14px 20px; margin:0; word-wrap:break-word}

.cc-nav-level-0 a:hover,

.cc-nav-level-0 a:focus,

.cc-nav-level-0 a:active

{background:#0082db;}

.cc-nav-level-0 .cc-nav-current > a:link,

.cc-nav-level-0 .cc-nav-current > a:visited,

.cc-nav-level-0 .cc-nav-parent > a:link,

.cc-nav-level-0 .cc-nav-parent>a:visited

{background:#006594;}

 

.cc-nav-level-1

{display:none; z-index:1000; position:absolute; top:100%;

left:0; opacity:0; margin:0; background:#006594;}

.cc-nav-level-1 li

{display:inline-block}

.cc-nav-level-1 li:hover .cc-nav-level-2

{display:block;opacity:1}

.cc-nav-level-1 a:link,

.cc-nav-level-1 a:visited

{width:60px; background:#0082db; font:12px/100% verdana,宋体; display:block;

word-wrap:break-word}

.cc-nav-level-1 a:hover,

.cc-nav-level-1 a:focus,

.cc-nav-level-1 a:active

{background:#006594; color:#fff;}

PS:

      又对下拉的二级菜单进行了修改,截图及部分代码如下。

.cc-nav-level-1 a:link, 

.cc-nav-level-1 a:visited

{width:60px;background:#fff; font:12px/100% verdana,宋体; color:#333; padding:10px 20px;

border:solid #ccc; border-width:0 1px 1px 1px; display:block;

-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/

-webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/

box-shadow:2px 2px 10px #909090;/*opera或ie9*/}

.cc-nav-level-1 a:hover, 

.cc-nav-level-1 a:focus,

.cc-nav-level-1 a:active,

.cc-nav-level-1 .cc-nav-current > a:link, 

.cc-nav-level-1 .cc-nav-current > a:visited, 

.cc-nav-level-1 .cc-nav-parent > a:link, 

.cc-nav-level-1 .cc-nav-parent>a:visited

{background:#007ebd; color:#fff;}

相关文章

Jimdo网站下拉式导航菜单代码简介 (Sun, 26 Oct 2014)
>> Read More

Jimdo自定义模板揭密:Jimdo首页及博客页面CSS的独立设计方法 (Tue, 12 Mar 2013)
>> Read More

Jimdo模板:介绍一个带边框线等高二分栏布局的Jimdo模板 (Tue, 29 Jan 2013)
>> Read More

支持IE6浏览器的二分栏侧栏空白处添加固定内容的代码 (Sat, 25 Feb 2012)
>> Read More

Jimdo广告盒的自定义方法 - Jimdo广告盒缩小、横放及美化等 (Mon, 31 Oct 2011)
>> Read More

Jimdo网站首页设计初探 -“博客显示”元素的CSS修饰与美化 (Mon, 03 Oct 2011)
>> Read More

Jimdo自定义模板 - 自适应浏览器窗口二分栏布局在Jimdo网站上的应用 (Sun, 07 Aug 2011)
>> Read More

Jimdo模板 - 仿Win7记事本模板和仿腾讯微博模板CSS代码备份 (Sun, 05 Jun 2011)
>> Read More

Jimdo模板 - 关于网上邻居改版的几点说明 | 记事本模板纪念 (Fri, 27 May 2011)
>> Read More

Jimdo自定义模板揭密 - Jimdo CSS选择器汇编(广告盒) (Sat, 26 Mar 2011)
>> Read More

Write a comment

Comments: 8
  • #1

    网型网秀 (Tuesday, 28 October 2014 06:35)

    嗯,这个下拉菜单后台出现变动有一段时间了,也算有点改进。某天在Jimdoblog页面看到留言簿有回复的按钮以为是新功能,后来才发现使用的是wp,Jimdo的改进也有些漫长啊。

  • #2

    网上邻居 (Tuesday, 28 October 2014 13:12)

    网型网秀:
    后台确实早就有这些菜单选项了,只因最近分析了一下新的系统模板,才发现它的作用和用途。做了点测试,故做了点记录。

  • #3

    诸葛草帽 (Monday, 03 November 2014 14:22)

    我过来赞一个!

  • #4

    网上邻居 (Tuesday, 04 November 2014 16:02)

    诸葛草帽:
    应该有些时日没见了。如果有时间,你的下拉菜单可以改成Jimdo系统的了。

  • #5

    诸葛草帽 (Wednesday, 05 November 2014 13:48)

    我现在在新加坡工作,空闲时间比以前更少了,我忍不住也要动一动了

  • #6

    雪鹰领主 (Sunday, 28 June 2015 09:15)

    这样式略显牛逼

  • #7

    best case for iphone 6 (Wednesday, 06 April 2016 16:40)

    An example of this is when I am typing on my messenger, the letters will hold and not be typed. Another example is when I try to touch on an app sometimes it will open and other times it will just open up quick options for that app.

  • #8

    爱Q梦想网 (Saturday, 27 August 2016 11:49)

    不错,支持