并不是享有的子菜单出现在一回澳门真人网上娱乐网址

     今后大家要贯彻菜单,都须要借助Javascript,明日我们用CSS 3与Html
来实现多少个纯菜单,首先来看大旨的HTML片断代码:

        大家要贯彻像Google+
这样圆圈效果,
不使用图片.这里只利用CSS3JQuery,
先定义CSS:

    <nav>

        <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">Language</a>

                <ul>

                    <li><a href="#">Java</a></li>

                    <li><a href="http://www.cnblogs.com/wintersun/category/85989.html">CSharp</a></li>

                    <li><a href="#">Script</a>

                        <ul>

                            <li><a href="#">Ruby</a></li>

                            <li><a href="#">Python</a></li>

                        </ul>

                    </li>

                </ul>

            </li>

            <li><a href="#">Articles</a>

                <ul>

                    <li><a href="http://www.cnblogs.com/wintersun/category/176164.html">.net</a></li>

                    <li><a href="http://www.cnblogs.com/wintersun/category/65430.html">Database</a></li>

                    <li><a href="http://www.cnblogs.com/wintersun/category/163639.html">WebDev</a></li>

                </ul>

            </li>

            <li><a href="http://wintersun.cnblogs.com">About</a></li>

        </ul>

    </nav>
   1:  <style type="text/css">

   2:  div.circle {

   3:      margin: 100px auto;

   4:      width:200px;

   5:      height:200px;

   6:  }

   7:  div.outer.hover {

   8:      -moz-transform: scale(1.45);

   9:      -webkit-transform: scale(1.45);

  10:      transform: scale(1.45);

  11:  }

  12:   

  13:  div.outer{

  14:      position:absolute;

  15:      z-index:800;

  16:      -webkit-transition: all .2s ease-in-out;

  17:      -moz-transition: all .2s ease-in-out;

  18:      -o-transition: all .2s ease-in-out;

  19:      transition: all .2s ease-in-out;

  20:       background:transparent;

  21:      width:122px;

  22:      height:122px;

  23:      -webkit-border-radius: 61px;

  24:      -moz-border-radius: 61px;

  25:      border-radius: 61px;

  26:      border:1px solid #aaaaaa;

  27:  }

  28:  div.middle

  29:   {

  30:       margin:1px;

  31:      width:122px;

  32:      height:122px;

  33:      -webkit-border-radius: 61px;

  34:      -moz-border-radius: 61px;

  35:      border-radius: 61px; 

  36:      background: #ececec; 

  37:     z-index:900;

  38:       -webkit-transition: all .2s ease-in-out;

  39:      -moz-transition: all .2s ease-in-out;

  40:      -o-transition: all .2s ease-in-out;

  41:      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#d8d8d8',GradientType=0 );

  42:      background: linear-gradient(top, #ececec 0%,#d8d8d8 100%);

  43:       position:absolute;

  44:     

  45:      transition: all .2s ease-in-out;

  46:     background: -moz-linear-gradient(top, #ececec 0%, #d8d8d8 100%); 

  47:      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececec), color-stop(100%,#d8d8d8));

  48:      background: -webkit-linear-gradient(top, #ececec 0%,#d8d8d8 100%);

  49:      background: -o-linear-gradient(top, #ececec 0%,#d8d8d8 100%); 

  50:      background: -ms-linear-gradient(top, #ececec 0%,#d8d8d8 100%);

  51:  }

  52:   

  53:  div.middle.hover {

  54:      -moz-transform: scale(1.4);

  55:      -webkit-transform: scale(1.4);

  56:      transform: scale(1.4);

  57:  }

  58:  div.inner

  59:  {

  60:      margin:14px;

  61:   

  62:      background:#3f96d1;

  63:      width:96px;

  64:      height:96px;

  65:   

  66:      font-size:11px;

  67:      color:#FFF;

  68:      line-height:96px;

  69:      text-align:center;

  70:      font-family:Arial;

  71:   

  72:      -webkit-border-radius: 48px;

  73:      -moz-border-radius: 48px;

  74:      border-radius: 48px;

  75:    

  76:      -webkit-box-shadow: inset 0px 1px 1px 0px #575757;

  77:      -moz-box-shadow: inset 0px 1px 1px 0px #575757;

  78:      box-shadow: inset 0px 1px 1px 0px #575757;

  79:   

  80:      border-bottom:1px solid #FFF;

  81:   

  82:      position:absolute;

  83:      z-index:1000;

  84:   

  85:  }

  86:  </style>

接下去定义样式,使用CSS选取器我们能够特异性和先进目标单个元素深埋的HTML结构,而无需非常的id或类。第一个隐蔽子菜单通过瞄准任何UL的在一个UL和display:block;为了使这些菜单再现他们需要兑换成块元素在悬停的李。这个 >子采纳符确认保障独有孩子UL的李在目的上空盘旋,并不是享有的子菜单出现在壹回。然后使用CSS3属性如梯度,盒阴影和边界半径。

引入JQuery:

    <style type="text/css">

        body 

        {

           background: #efefef;

            font-family:Verdana;

        }

        nav ul ul

        {

            display: none;

        }

        nav ul li:hover > ul

        {

            display: block;

        }



        nav ul

        {

            background: #efefef;

            background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);

            background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);

            background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);

            box-shadow: 0px 0px 9px rgba(0,0,0,0.15);

            padding: 0 20px;

            border-radius: 10px;

            list-style: none;

            position: relative;

            display: inline-table;

        }

        nav ul:after

        {

            content: "";

            clear: both;

            display: block;

        }



        nav ul li

        {

            float: left;

        }

        nav ul li:hover

        {

            background: #4b545f;

            background: linear-gradient(top, #4f5964 0%, #5f6975 40%);

            background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);

            background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);

        }

        nav ul li:hover a

        {

            color: #fff;

        }

        nav ul li a

        {

            display: block;

            padding: 5px 40px;

            color: #757575;

            text-decoration: none;

        }



        nav ul ul

        {

            background: #5f6975;

            border-radius: 0px;

            padding: 0;

            position: absolute;

            top: 100%;

        }

        nav ul ul li

        {

            float: none;

            border-top: 1px solid #6b727c;

            border-bottom: 1px solid #575f6a;

            position: relative;

        }

        nav ul ul li a

        {

            padding: 5px 40px;

            color: #fff;

        }

        nav ul ul li a:hover

        {

            background: #4b545f;

        }

        nav ul ul ul

        {

            position: absolute;

            left: 100%;

            top: 0;

        }

    </style>
   1:  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript">

   2:  </script>

   3:   

   4:  <script language="javascript" type="text/javascript">

   5:  $(function() {

   6:      $('div.circle').mouseover(function() {

   7:          $('div.outer').addClass('hover');

   8:          $('div.middle').addClass('hover');

   9:      });

  10:      $('div.circle').mouseout(function() {

  11:          $('div.outer').removeClass('hover');

  12:          $('div.middle').removeClass('hover');

  13:      });

  14:  });

  15:  </script>

最后的效果与利益在Firefox 13.0.1 是这么的:

目标的HTML片段:

澳门真人网上娱乐网址 1

<div class="circle"><div class="outer"></div><div class="middle"></div><div class="inner">Developers code</div></div>

留心IE9不援助,希望对您Web开辟有扶持。您可以感兴趣的篇章:

好了,运动后效果图是那般的:

JQuery实现轻巧下拉菜单

澳门真人网上娱乐网址 2

作者:Petter Liu
出处:http://www.cnblogs.com/wintersun/
本文版权归小编和博客园共有,招待转发,但未经作者同意必得保留此段注明,且在小说页面分明地点给出最早的作品连接,不然保留追究法律义务的权利。
该小说也还要宣布在自个儿的独门博客中-Petter Liu
Blog

你大概先了然CSS3,
能够参见这儿.

期待对你WEB开采有帮助.

作者:Petter Liu
出处:http://www.cnblogs.com/wintersun/
本文版权归作者和天涯论坛共有,应接转发,但未经小编同意必得保留此段注解,且在小说页面显明地点给出原版的书文连接,否则保留追究法律权利的职务。
该小说也同不经常候公布在小编的独门博客中-Petter Liu
Blog