Điều hướng menu giúp người đọc của bạn dễ dàng. Bài trước đây đã chia sẻ một mịn jQuery đa cấp trình đơn thả xuống và bạn sẽ nhận thấy nó vẫn còn hiện diện trong bài viết phổ biến widget.
Xem thử:
Live Demo
Bảng điều khiển Blogger> Layout> Thiết kế. (Trong Bảng điều khiển giao diện người dùng mới> Layout)
Click vào thêm một liên kết tiện ích dưới đây của phần Header (xem hình dưới đây)
Dán mã dưới đây và lưu nó.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script> <script type="text/javascript"> ddsmoothmenu.init({ mainmenuid: "smoothmenu1", orientation: 'h', classname: 'ddsmoothmenu', contentsource: "markup" }) </script> <style> .ddsmoothmenu { width: 100%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2J52LtnZgMrbwGIStAFqYTbMgL25Z84u4QrYytStYtsvobGNNvcfUlx1JA_5o5ujyPGm4hLWbknlMZhh5R_CFra7GmTIgBIhxNrrs1Hw419dkTQ8NUcPbmdD7nnvxgAZ4hO89IWp4ZM/s1600/menu-bg.png); vertical-align: middle; height: 33px; font-family: Verdana; font-size: 13px; font-weight: bold; } .ddsmoothmenu ul { z-index: 100; margin: 0; padding: 0; list-style-type: none; } .ddsmoothmenu ul li { position: relative; display: inline; float: left; } .ddsmoothmenu ul li a { display: block; color: white; padding: 8px 10px; border-right: 1px solid #778; color: #666666; text-decoration: none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2J52LtnZgMrbwGIStAFqYTbMgL25Z84u4QrYytStYtsvobGNNvcfUlx1JA_5o5ujyPGm4hLWbknlMZhh5R_CFra7GmTIgBIhxNrrs1Hw419dkTQ8NUcPbmdD7nnvxgAZ4hO89IWp4ZM/s1600/menu-bg.png); } * html .ddsmoothmenu ul li a { display: inline-block; } .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited { color: white; } .ddsmoothmenu ul li a.selected { background: black; color: white; } .ddsmoothmenu ul li a:hover { background: black; color: white; } .ddsmoothmenu ul li ul { position: absolute; left: 0; display: none; visibility: hidden; } .ddsmoothmenu ul li ul li { display: list-item; float: none; } .ddsmoothmenu ul li ul li ul { top: 0; } .ddsmoothmenu ul li ul li a { font: normal 13px Verdana; width: 160px; padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; } * html .ddsmoothmenu { height: 1%; } .downarrowclass { position: absolute; top: 12px; right: 7px; } .rightarrowclass { position: absolute; top: 6px; right: 5px; } .ddshadow { position: absolute; left: 0; top: 0; width: 0; height: 0; background: silver; } .toplevelshadow { opacity: 0.8; } </style> <div id="smoothmenu1" class="ddsmoothmenu"> <ul> <li> <a href="http://www.helperblogger.com/">Home</a> </li> <li> <a href="#">Folder 0</a> <ul> <li> <a href="#">Sub Item 1.1</a> </li> <li> <a href="#">Sub Item 1.2</a> </li> </ul> </li> <li> <a href="#">Folder 1</a> <ul> <li> <a href="#">Sub Item 1.1</a> </li> <li> <a href="#">Sub Item 1.2</a> </li> </ul> </li> <li> <a href="#">Item 3</a> </li> <li> <a href="#">Folder 2</a> <ul> <li> <a href="#">Sub Item 2.1</a> </li> </ul> </li> <li> <a href="http://www.helperblogger.com/">Create This</a> </li> </ul> <br style="clear: left" /> <br style="clear: left" /> </div>
