当前位置:Web前端 > > 正文

css3特效旋转菜单(CSS3实现的水平标题菜单)

时间:2021-11-05 14:18:45类别:Web前端

css3特效旋转菜单

CSS3实现的水平标题菜单实现效果:

css3特效旋转菜单(CSS3实现的水平标题菜单)

实现代码

html

  • <nav class="dropdownmenu">
      <ul>
        <li><a href="http://www.jochaho.com/wordpress/">开心学习网</a></li>
        <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">jb51</a></li>
        <li><a href="#">Articles on HTML5 & CSS3</a>
          <ul id="submenu">
            <li><a href="http://www.jochaho.com/wordpress/difference-between-svg-vs-canvas/">Difference between SVG vs. Canvas</a></li>
            <li><a href="http://www.jochaho.com/wordpress/new-features-in-html5/">New features in HTML5</a></li>
            <li><a href="http://www.jochaho.com/wordpress/creating-links-to-sections-within-a-webpage/">Creating links to sections within a webpage</a></li>
          </ul>
        </li>
        <li><a href="http://www.jochaho.com/wordpress/category/news/">News</a></li>
        <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">Contact Us</a></li>
      </ul>
    </nav>
    
  • CSS3

  • .dropdownmenu ul, .dropdownmenu li {
    	margin: 0;
    	padding: 0;
    }
    .dropdownmenu ul {
    	background: gray;
    	list-style: none;
    	width: 100%;
    }
    .dropdownmenu li {
    	float: left;
    	position: relative;
    	width:auto;
    }
    .dropdownmenu a {
    	background: #30A6E6;
    	color: #FFFFFF;
    	display: block;
    	font: bold 12px/20px sans-serif;
    	padding: 10px 25px;
    	text-align: center;
    	text-decoration: none;
    	-webkit-transition: all .25s ease;
    	-moz-transition: all .25s ease;
    	-ms-transition: all .25s ease;
    	-o-transition: all .25s ease;
    	transition: all .25s ease;
    }
    .dropdownmenu li:hover a {
    	background: #000000;
    }
    #submenu {
    	left: 0;
    	opacity: 0;
    	position: absolute;
    	top: 35px;
    	visibility: hidden;
    	z-index: 1;
    }
    li:hover ul#submenu {
    	opacity: 1;
    	top: 40px;	/* adjust this as per top nav padding top & bottom comes */
    	visibility: visible;
    }
    #submenu li {
    	float: none;
    	width: 100%;
    }
    #submenu a:hover {
    	background: #DF4B05;
    }
    #submenu a {
    	background-color:#000000;
    }
    
  • 以上就是CSS3实现的水平标题菜单的详细内容,更多关于CSS3 标题菜单的资料请关注开心学习网其它相关文章!

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐