Cách tạo Dropdown Menu cho Blog đơn giản

posted in: Thủ thuật Blogspot | 0

Bạn là người yêu thích Blog? Bạn muốn tự tay Edit Blog trở nên thật đẹp, độc đáo, ấn tượng. Trong bài viết này chúng tôi sẽ hướng dẫn độc giả cách tạo Dropdown Menu cho Blog đơn giản, cực độc, cực ấn tượng.

Dưới đây là mẫu Dropdown menu rất đẹp mà tutorial sưu tầm được, các bạn có thể chỉnh sửa lại file css để cho phù hợp với blogger -website của bạn. Các bạn copy 2 đoạn code dưới đây dán vào trang của bạn theo hướng dẫn dưới nhé.

Cách tạo Dropdown Menu sổ dọc có ảnh cho website – Blogspot

-Thêm đoạn CSS dưới đây vào trước thẻ đóng </head>

<Style type=’text/css’>

.menu {

    height: 40px;

    width: 505px;

    background: #4c4e5a;

    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    }

    .menu li {

    position: relative;

    list-style: none;

    float: left;

    display: block;

    height: 40px;

    }

    /* Links */

    .menu li a {

    display: block;

    padding: 0 14px;

    margin: 6px 0;

    line-height: 28px;

    text-decoration: none;

    border-left: 1px solid #393942;

    border-right: 1px solid #4f5058;

    font-family: Helvetica, Arial, sans-serif;

    font-weight: bold;

    font-size: 13px;

    color: #f3f3f3;

    text-shadow: 1px 1px 1px rgba(0,0,0,.6);

    -webkit-transition: color .2s ease-in-out;

    -moz-transition: color .2s ease-in-out;

    -o-transition: color .2s ease-in-out;

    -ms-transition: color .2s ease-in-out;

    transition: color .2s ease-in-out;

    }

    .menu li:first-child a { border-left: none; }

    .menu li:last-child a{ border-right: none; }

    .menu li:hover > a { color: #8fde62; }

    /* Sub Menu */

    .menu ul {

    position: absolute;

    top: 40px;

    left: 0;

    opacity: 0;

    background: #1f2024;

    -webkit-border-radius: 0 0 5px 5px;

    -moz-border-radius: 0 0 5px 5px;

    border-radius: 0 0 5px 5px;

    -webkit-transition: opacity .25s ease .1s;

    -moz-transition: opacity .25s ease .1s;

    -o-transition: opacity .25s ease .1s;

    -ms-transition: opacity .25s ease .1s;

    transition: opacity .25s ease .1s;

    }

    .menu li:hover > ul { opacity: 1; }

    .menu ul li {

    height: 0;

    overflow: hidden;

    padding: 0;

    -webkit-transition: height .25s ease .1s;

    -moz-transition: height .25s ease .1s;

    -o-transition: height .25s ease .1s;

    -ms-transition: height .25s ease .1s;

    transition: height .25s ease .1s;

    }

    .menu li:hover > ul li {

    height: 36px;

    overflow: visible;

    padding: 0;

    }

    .menu ul li a {

    width: 100px;

    padding: 4px 0 4px 40px;

    margin: 0;

    border: none;

    border-bottom: 1px solid #353539;

    }

    .menu ul li:last-child a { border: none; }

    /* Icons */

    .menu a.documents { background: url(https://designmodo.com/demo/css3dropdownmenu/img/docs.png) no-repeat 6px center; }

    .menu a.messages { background: url(https://designmodo.com/demo/css3dropdownmenu/img/bubble.png) no-repeat 6px center; }

    .menu a.signout { background: url(https://designmodo.com/demo/css3dropdownmenu/img/arrow.png) no-repeat 6px center; }

    </style>

-Thêm đoạn code sau vào phần bạn muốn hiển thị menu này

<li><a href=”Link web”>My dashboard</a></li>

    <li><a href=”Link web”>Likes</a></li>

    <li><a href=”Link web”>Views</a>

    <ul>

    <li><a href=”Link web”>Documents</a></li>

    <li><a href=”Link web”>Messages</a></li>

    <li><a href=”Link web”>Sign Out</a></li>

    </ul>

    </li>

    <li><a href=”Link web”>Uploads</a></li>

    <li><a href=”Link web”>Videos</a></li>

    <li><a href=”Link web”>Documents</a></li>

    </ul> <!– end .menu –>

Chúc các bạn thành công và tạo nên những Blog đẹp, cực ấn tượng!

Nguồn: bittuot.blogspot.com

 >>> Gợi ý Google:

dropdown menu jquery
dropdown menu css3
dropdown menu wordpress
dropdown menu bootstrap 3
dropdown menu css
dropdown menu css3 animation
dropdown menu izwebz
dropdown menu joomla

Bình luận