Jimdo多级导航菜单的分离方法

      在Jimdo技术的学习过程中,导航菜单的分离问题,困扰了很多Jimdo爱好者。按Jimdo菜单的设计,竖向排列时,主菜单和子菜单很好处理,也可以做的很漂亮,但是,如果导航菜单设为横排,则子菜单将非常难看。在一些系统模板里,这种情况下,大都是将子菜单分离出去,竖排放到侧栏里。

      曾经花了不少时间研究学习系统模板导航菜单的分离技术,一直不得要领。在学习过程中,也摸索出了一些方法,也具有一定实用价值,这里先简单介绍一下。

一、绝对定位分离法

      它的思路是,主菜单保持不变,而子菜单通过绝对定位的方法,将它放到一个新建的层上,这样间接地实现了主菜单和子菜单的分离。它的优点是CSS代码比较简单,缺点也相当明显,因为子菜单是动态显示的,如果无子菜单时,那个层将是空白。具体请见Jimdo多级横排导航菜单分离初探

二、自定义和系统菜单相结合

      这个方法我用了很长一段时间,其思路是:自定义横排主菜单,子菜单采用系统菜单,若横排则放在主菜单下方,若竖排则放到侧栏里(系统主菜单则在菜单编辑里进行隐藏),再将自定义的主菜单链接到隐藏的系统主菜单。这种方法的优点是,主菜单是中文的,而其地址可以设计成英文的,而且子菜单是动态显示的。它的缺点是要在HTML里定义链接,比如我用的是:

 <div id="menu">
        <ul>
            <li><a href="http://jdm.jimdo.com/">首 页</a></li>
            <li><a href="/preliminary/">Jimdo入门</a></li>

            <li> <a href="/skill/">Jimdo技巧</a></li>
            <li><a href="/code/">Jimdo代码</a> </li>
            <li><a href="/template/">自定义模板</a></li>
            <li><a href="/exchange/">Jimdo交流</a></li>
            <li><a href="/friends-1/">Jimdo好友</a></li>
            <li><a href="/links/">友情链接</a></li>
            <li><a href="/surfing/">网上冲浪</a></li>
            <li><a href="/notes/">站长手记</a></li>
            <li><a href="/message/">访客留言</a></li>
        </ul>
    </div>

      另外,再在CSS里对它们的样式分别进行设计。

三、比较理想的CSS+HTML分离方法

      以上内容只是顺便介绍一下,本文主要是介绍一下拓拓设计的一种CSS分离方法。

      原文地址:http://blog.orlotus.com/2011/03/jimdo-nav.html

      演示网站:http://lotus.jimdo.com/

      它的基本内容是:

HTML部分:

设主菜单为:
    <div class=“menu”>
       <var>navigation[1|2|3]</var>
    </div>

  子菜单为(二级、三级)
    <div id="nav">
        <var>navigation[1|2|3]</var>
    </div>

CSS代码:
    .menu ul#mainNav2 {display:none;}
    #nav #mainNav1 li a.level_1 {display:none; font-size:0px;}

      经过简单测试,这个方法和系统模板的分离效果是一样的。它的设计思想是:HTML里,主菜单和子菜同时调用系统菜单模块,但是,在CSS里,主菜单里隐藏子菜单,子菜单里隐藏主菜单,再在CSS里分别对它们的样式进行设计后,即可获得完美的分离式导航菜单了。

      这是一种相当巧妙的设计思路,懂CSS的朋友,可以尽情发挥!在此也对拓拓分享这么好的东西表示感谢!

Write a comment

Comments: 15
  • #1

    Suitear (Sunday, 13 March 2011 15:15)

    占位,其实~就是Jimdo不太好的缺点~

  • #2

    网上邻居 (Sunday, 13 March 2011 15:30)

    呵呵,Jimdo毕竟是个在线建站系统,允许用户这么任意的自定义,已经相当不错了。当然,这个系统在中国化方面,做的相当差。

  • #3

    失色天空 (Sunday, 13 March 2011 15:48)

    技术文章,,不错!!!

  • #4

    网上邻居 (Monday, 21 March 2011 23:24)

    失色天空:
    我的导航菜单已按这种方法改了一段时间,有需要二级菜单的朋友,可以试试。

  • #5

    iscience (Saturday, 02 April 2011 17:33)

    请问代码改那些?怎么改

  • #6

    网型网秀 (Sunday, 10 April 2011 12:18)

    好像曾经我也用过这种方法。

  • #7

    3m3 (Thursday, 19 May 2011 11:14)

    这个有点费劲,整了好几天。另邻居的站内搜索结果页面有些乱。

  • #8

    网上邻居 (Thursday, 19 May 2011 20:07)

    3m3:你好!
    谢谢提醒!刚才看一下...确实惨不忍睹。
    最近准备重新做个有一定拓展功能的模板,让Jimdo网站看上去也可以“变幻莫测”...只是时间和精力有限,更加水平有限,只能有空的时候慢慢试验。

  • #9

    金志东 (Monday, 23 May 2011 14:44)

    很好,很强大!

  • #10

    陈冲 (Friday, 12 August 2011 13:19)

    好站呀。

  • #11

    王若冰 (Thursday, 03 November 2011 22:21)

    经过测试,在有些浏览器中都显示了,不能隐藏,很难看

  • #12

    网上邻居 (Thursday, 03 November 2011 22:39)

    王若冰:你好!
    从理论上讲,代码是可行的,不知道你说的有些浏览器都是哪些浏览器,估计是你的代码出了点问题。
    我目前的导航菜单就用了文中介绍的方法,比如“Jimdo交流”、“访客留言”等都有二级菜单,帮忙测试一下,也不行吗?

  • #13

    临川兄弟家电 (Saturday, 15 September 2012 16:47)

    很好的导航啊

  • #14

    wlp (Friday, 03 July 2015 12:27)

    http://www.burberry-outlet.jp.net/
    http://www.burberryoutlet.org.uk/
    http://www.burberryoutlet-online.co.com/
    http://www.burberryoutlet-online.in.net/
    http://www.calvinklein.co.com/
    http://www.celinebags.org/
    http://www.chanelhandbags.net.co/
    http://www.cheapbaseballbats.net/
    http://www.christianlouboutinshoes.ar.com/
    http://www.air-huarache.co.uk/
    http://www.airjordans.us/
    http://www.airjordanshoes2015.com/
    http://www.airmax-2015.org/
    http://www.airmax-90.org/
    http://www.babyliss-pro.net/
    http://www.basketballshoes.com.co/
    http://www.beatsbydrdre.co.com/
    http://www.beatsbydre.com.co/
    http://www.beats-by-dre.com.co/
    http://www.beatsheadphones.in.net/
    http://www.bottega.us/
    http://www.burberryhandbags.net.co/
    http://www.cheapjerseys.in.net/
    http://www.cheap-jordans.net/
    http://www.cheapmichaelkors.us.org/
    http://www.cheap-nikeshoes.com/
    http://www.cheapoakley.us.org/
    http://www.cheapoakleysunglasses.ar.com/
    http://www.cheap-oakleysunglasses.in.net/
    http://www.cheaprayban.com.co/
    http://www.cheapshoes.com.co/
    http://www.cheapuggboots.eu.com/
    http://www.chiflatiron.net.co/
    http://www.christian--louboutin.in.net/
    http://www.christianlouboutin.org.uk/
    http://www.christianlouboutinshoes.jp.net/
    http://burberry.outletnow.net/
    http://christian.louboutin-outlet.net/
    http://toryburch.salesandals.net/
    http://www.abercrombieand-fitch.com.co/
    http://www.abercrombiefitch.us.com/
    http://www.abercrombie-kids.us.com/
    http://www.coachfactory-outlet.co.com/
    http://www.coachfactoryoutletonline.co.com/
    http://www.coach-handbags.com.co/
    http://www.coachoutlet-online.com.co/
    http://www.coachoutletstore.net.co/
    http://www.coachoutletstore-online.com.co/
    http://www.coco-chanelbags.com.co/
    http://www.converse.net.co/
    http://www.designerhandbagsoutlet.com.co/
    http://www.eyeglassesonline.us.com/
    http://www.eyeglassframes.us.com/
    http://www.fashion-clothing.us.com/
    http://www.ferragamo.com.co/
    http://www.ferragamoshoes.net/
    http://www.ghdhairstraightener.com.co/
    http://www.jimmychoo.net.co/
    http://www.jordanretro.org/
    http://www.jordan-shoes.com.co/
    http://www.juicycouture.com.co/
    http://www.juicycoutureoutlet.net.co/
    http://www.louisvuitton-outlet.com.co/
    http://www.louisvuitton-outlets.us/
    http://www.marcjacobsonsale.com/
    http://www.mcm-bags.net/
    http://www.mcmhandbags.com.co/
    http://www.michaelkors.so/
    http://www.michael--kors.us.com/
    http://www.michaelkorsbags.us.org/
    http://www.michaelkorshandbags.org.uk/
    http://www.michael-kors-handbags.us.com/
    http://www.michaelkorsoutlet.ar.com/
    http://www.michael-kors-outlet.us.org/
    http://www.michaelkorsoutlet-online.ar.com/
    http://www.michael-kors-outlet-online.us.org/
    http://www.michaelkorsoutletonline-sale.us.com/
    http://www.michaelkors-uk.org.uk/
    http://www.montblanc--pens.net/
    http://www.newbalance-outlet.org/
    http://www.nike-air-max.us/
    http://www.nikefactory.org/
    http://www.nikefree5.net/
    http://www.nikefree-run.net/
    http://www.nikefree-run.org.uk/
    http://www.jordanrelease-dates.com/
    http://www.nikemercurial.net/
    http://www.nikerosherun.us/
    http://www.nikestore.us/
    http://www.northface.us.org/
    http://www.northfaceoutlet.com.co/
    http://www.oakleyoutlet.us.org/
    http://www.oakley-sunglasses.us.org/
    http://www.oakleysunglassescheap.in.net/
    http://www.oakleysunglassesoutlet.com.co/
    http://www.omegawatches.us.com/
    http://www.pandora-charms.org.uk/
    http://www.pandorajewelry.com.co/
    http://www.polo-outlets.com/
    http://www.pradahandbags.net.co/
    http://www.pradahandbags.com.co/
    http://www.pradashoes.com.co/
    http://www.ralph-lauren.org.uk/
    http://www.ralphlaurenoutlet.us.com/
    http://www.ralphlauren-outlet.org.uk/
    http://www.ralphlaurenoutletonline.com.co/
    http://www.ralphlaurenoutletonline.in.net/
    http://www.gucci.me.uk/

  • #15

    italian leather bags (Saturday, 19 August 2017 14:38)

    Your work is very good and I appreciate you and hopping for some more informative posts. Thank you for sharing great information to us.