怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 344 JQUERY DREAMWEAVER
html+jquery+css3垂直手风琴展开收缩展开菜单ui
来源：互联网
2023-03-16 23:54:30 181
html jquery css3社交平台垂直手风琴展开收缩展开菜单ui
工具/原料
- adobe dreamweaver
方法/步骤
准备好需要用到的图标。
新建html文档。
书写hmtl代码。
ul class="mainmenu">
li> img src="images/user.png" alt="User icon" class="icon" /> span>Account/span> /li>
ul class="submenu">
div class="expand-triangle">/div>
li>span>Basics/span>/li>
li>span>Picture/span>/li>
li>span>Go Premium/span>/li>
/ul>
li> img src="images/envelope.png" alt="Envelope icon" class="icon"> span>Messages/span>
div class="messages">23/div>
/li>
ul class="submenu">
div class="expand-triangle">/div>
li>span>New/span>/li>
li>span>Sent/span>/li>
li>span>Trash/span>/li>
/ul>
li> img src="images/cog.png" alt="Cog icon" class="icon"> span>Settings/span> /li>
ul class="submenu">
div class="expand-triangle">/div>
li>span>Language/span>/li>
li>span>Password/span>/li>
li>span>Notifications/span>/li>
li>span>Privacy/span>/li>
li>span>Payments/span>/li>
/ul>
li>img src="images/key.png" alt="Key icon" class="icon">span>Logout/span>/li>
/ul>
书写css代码。
body { margin: 0; padding: 0; font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; background: url("../images/bg.jpg") top center no-repeat; letter-spacing: 0.2px; }
ul { list-style: none; width: 276px; }
li { cursor: pointer; }
.mainmenu { margin: 90px auto; font-size: 16px; position: relative; padding: 0; }
.mainmenu > li { background-color: #e4644b; border-top: 1px solid #d05942; height: 48px; color: #f7f1e3; box-sizing: border-box; position: relative; padding: 0 0 0 40px; }
.mainmenu > li:first-child { border-radius: 7px 7px 0 0; border-top: 0; }
.mainmenu > li:last-child { border-radius: 0 0 7px 7px; }
.mainmenu > li span { display: block; line-height: 48px; }
.mainmenu > li .icon { float: left; width: 20px; height: 20px; display: block; position: absolute; left: 10px; top: 15px; }
.mainmenu > li .messages { background: url("../images/messages.png") no-repeat; padding: 0; margin-top: -33px; margin-right: 19px; float: right; display: block; width: 34px; height: 18px; text-align: center; font-size: 11px; line-height: 19px; }
.expand-triangle { background: url("../images/expand.gif") top left no-repeat; height: 10px; width: 276px; content: " "; margin-left: -40px; }
.submenu { box-sizing: border-box; color: #ae9f9f; font-size: 13px; content: " ";/*opacity: 0.5;*/
}
.submenu li { line-height: 20px; height: 35px; padding-top: 11px; margin-left: -40px; background-color: #484141; border-left: solid 6px #484141; transition: border-left 220ms ease-in; }
.submenu .chosen, .submenu .chosen:hover { border-left: solid 6px #96d145; }
.submenu li:hover { border-left: solid 6px #d05942; }
.submenu li span { margin-left: 30px; }
.animate { animation: flip 2000ms ease-in-out alternate; }
@keyframes flip { to {
transform: rotateY(360deg);
}
}
书写并添加js代码。
script src="js/jquery-2.1.1.min.js">/script>
script>
$(document).ready( function() {
var $submenu = $('.submenu');
var $mainmenu = $('.mainmenu');
$submenu.hide();
$submenu.first().delay(400).slideDown(700);
$submenu.on('click','li', function() {
$submenu.siblings().find('li').removeClass('chosen');
$(this).addClass('chosen');
});
$mainmenu.on('click', 'li', function() {
$(this).next('.submenu').slideToggle().siblings('.submenu').slideUp();
});
$mainmenu.children('li:last-child').on('click', function() {
$mainmenu.fadeOut().delay(500).fadeIn();
});
});
/script>
代码整体结构。
查看效果。
注意事项
- jquery-2.1.1.min.js书写并添加js代码。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 335 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 378 JQUERY