MDF Megamenu is HTML5/CSS3 sử dụng tiêu chuẩn Bootstrap và lớp hệ thống lưới dịch. Nó có thể giữ bất kỳ tùy chỉnh HTML hoặc các thành phần khác Bootstrap. MDF Megamenu tương thích với các thiết bị di động và các trình duyệt web hiện nay. Bạn có thể lựa chọn giữa 11 skins và 3 bố trí độc đáo. Hơn nữa, bạn có thể cấu hình tùy chỉnh cho giao diện, màu sắc cách trình bài của menu, phần cài đặt được cố định bởi một nút cài đặt có hình bánh răng ở góc phải giao diện, bạn click vào đó thì nó bung ra khung cài đặt và nó được cố định khi bạn kéo thanh trược đi bắt cứ đâu.
Để làm cho công việc thiết kế của bạn dễ dàng hơn tôi đã bao gồm một Builder Wizard để giúp bạn xây dựng megamenu.
Tính năng
- 4 Layouts (như các phiên bản 1.3) + 11 Skins Per Mỗi Layout
- 3 Animation Transitions
- 3 Menu con hiệu ứng hover
- hoàn toàn Responsive
- mặc định | Chú ý | Hành vi cố định
- Full Width Navigation
- Fixed Width Navigation
- Full Width Megamenu
- Bootstrap Navigation và hệ thống lưới
- Working Contact Form
- 3 Web Fonts Included
- Hỗ trợ Cross Browser
- Thiết bị cảm ứng thân thiện
- Megamenu Wizard Builder
- Tài liệu Megamenu Wizard Builder
- Dễ dàng tích hợp vào bất kỳ dự án Web
- Tinh khiết CSS3 Animations
- Để cài đặt thử MDF Megamenu - Bootstrap Responsive Megamenu các bạn tạo một cái thư mục tên Megamenu cho nó dể quản lý nhé. trong thư mục đó bạn tạo một file index.html với nội dung sau.
<!DOCTYPE html>Tiếp theo các bạn download thư viện js, fonts, img, css này về và giải nén vào trong thư mục Megamenu tạo lúc đầu nhé. nhớ ngang hàng với file index.html nhé.
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,follow" />
<title>Minh Dũ Blog - Tạo Menu với MDF Megamenu - Bootstrap Responsive Megamenu</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/et-line.css" />
<link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.css" />
<link rel="stylesheet" type="text/css" href="assets/css/mdf_megamenu.css" />
<link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
<link rel="stylesheet" type="text/css" href="assets/css/switch.css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
#logo{
background: url(assets/images/logo.png) center no-repeat;
width: 700px;
height: 410px;
margin: auto;
margin-top: -90px;
margin-bottom: -110px;
}
</style>
</head>
<body>
<header>
<div id="logo"></div>
</header>
<nav id="mdf_menu" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="assets/images/90x90.png" alt="logo"/></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="menu-el"><a><i class="glyphicon glyphicon-list-alt"></i>Lists</a>
<div class="mdf_sub_wrap mdf_flip row lists">
<div class="col-sm-3 col-xs-6">
<div class="cl-title">
<h4>Column Heading</h4>
</div>
<ul class="mdf_child_menu">
<li><a><i class="glyphicon glyphicon-th-large"></i>Sub-menu list item</a></li>
<li><a><i class="glyphicon glyphicon-road"></i>Sub-menu list item</a></li>
<li><a><i class="glyphicon glyphicon-refresh"></i>Sub-menu list item</a></li>
<li><a><i class="glyphicon glyphicon-list"></i>Sub-menu list item</a></li>
<li><a><i class="glyphicon glyphicon-tint"></i>Sub-menu list item</a></li>
</ul>
</div>
<div class="col-sm-3 col-xs-6">
<div class="cl-title">
<h4>Column Heading</h4>
</div>
<ul class="mdf_child_menu">
<li><a><i class="icon-paperclip"></i>Sub-menu list item</a></li>
<li><a><i class="icon-linegraph"></i>Sub-menu list item</a></li>
<li><a><i class="icon-upload"></i>Sub-menu list item</a></li>
<li><a><i class="icon-piechart"></i>Sub-menu list item</a></li>
<li><a><i class="icon-pricetags"></i>Sub-menu list item</a></li>
</ul>
</div>
<div class="col-sm-3 col-xs-6">
<div class="cl-title">
<h4>Column Heading</h4>
</div>
<ul class="mdf_child_menu">
<li><a><i class="glyphicon glyphicon-book"></i>Sub-menu list item</a></li>
<li><a><i class="glyphicon glyphicon-tags"></i>Sub-menu list item</a></li>
<li><a><i class="glyphicon glyphicon-edit"></i>Sub-menu list item</a></li>
<li><a><i class="glyphicon glyphicon-leaf"></i>Sub-menu list item</a></li>
<li><a><i class="glyphicon glyphicon-wrench"></i>Sub-menu list item</a></li>
</ul>
</div>
<div class="col-sm-3 col-xs-6">
<div class="cl-title">
<h4>Column Heading</h4>
</div>
<ul class="mdf_child_menu">
<li><a><i class="icon-paperclip"></i>Sub-menu list item</a></li>
<li><a><i class="icon-linegraph"></i>Sub-menu list item</a></li>
<li><a><i class="icon-upload"></i>Sub-menu list item</a></li>
<li><a><i class="icon-piechart"></i>Sub-menu list item</a></li>
<li><a><i class="icon-pricetags"></i>Sub-menu list item</a></li>
</ul>
</div>
</div>
</li>
<li class="menu-el">
<a><i class="glyphicon glyphicon-circle-arrow-down"></i>Dropdown</a>
<ul class="mdf_child_menu dropdown" data-width="200px">
<li>
<a><i class="glyphicon glyphicon-circle-arrow-down"></i>Sub-Item</a>
<ul class="mdf_child_menu">
<li><a><i class="icon-wallet"></i>Sub-menu list item</a></li>
<li><a><i class="icon-circle-compass"></i>Sub-menu list item</a></li>
<li><a><i class="icon-profile-female"></i>Sub-menu list item</a></li>
<li><a><i class="icon-aperture"></i>Sub-menu list item</a></li>
<li><a><i class="icon-pricetags"></i>Sub-menu list item</a></li>
</ul>
</li>
<li><a><i class="icon-circle-compass"></i>Sub-Item</a></li>
<li>
<a><i class="glyphicon glyphicon-circle-arrow-down"></i>Sub-Item</a>
<ul class="mdf_child_menu" data-width="230px">
<li><a><i class="icon-wallet"></i>Sub-menu list item</a></li>
<li>
<a><i class="icon-circle-compass"></i>Sub-menu list item</a>
<ul class="mdf_child_menu">
<li><a><i class="icon-wallet"></i>Sub-menu list item</a></li>
<li><a><i class="icon-circle-compass"></i>Sub-menu list item</a></li>
<li><a><i class="icon-profile-female"></i>Sub-menu list item</a></li>
<li><a><i class="icon-aperture"></i>Sub-menu list item</a></li>
<li><a><i class="icon-pricetags"></i>Sub-menu list item</a></li>
</ul>
</li>
<li><a><i class="icon-profile-female"></i>Sub-menu list item</a></li>
<li><a><i class="icon-aperture"></i>Sub-menu list item</a></li>
<li><a><i class="icon-pricetags"></i>Sub-menu list item</a></li>
</ul>
</li>
<li><a><i class="icon-pricetags"></i>Sub-Item</a></li>
</ul>
</li>
<li class="menu-el"><a><i class="icon-basket"></i>Products</a>
<div class="mdf_sub_wrap mdf_flip row">
<div class="col-sm-3 col-xs-12">
<div class="cl-title">
<h4>Categories</h4>
</div>
<ul class="mdf_child_menu">
<li><a><i class="icon-wallet"></i>Sub-menu list item</a></li>
<li><a><i class="icon-circle-compass"></i>Sub-menu list item</a></li>
<li><a><i class="icon-profile-female"></i>Sub-menu list item</a></li>
<li><a><i class="icon-aperture"></i>Sub-menu list item</a></li>
<li><a><i class="icon-pricetags"></i>Sub-menu list item</a></li>
</ul>
</div>
<div class="col-sm-4 col-xs-12">
<div class="cl-title">
<h4>Latest Added</h4>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="assets/images/135.jpg" alt="alt text"/>
</a>
</div>
<div class="media-body">
<h5 class="media-heading">Woman Bag ar1345</h5>
<small>Great item that combines both the lorem ipsum and doloret something.</small>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="assets/images/146.jpg" alt="alt text"/>
</a>
</div>
<div class="media-body">
<h5 class="media-heading">Woman Thing ar1345</h5>
<small>Great item that combines both the lorem ipsum and doloret something.</small>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="assets/images/155.jpg" alt="alt text"/>
</a>
</div>
<div class="media-body">
<h5 class="media-heading">Woman Shoes ar1345</h5>
<small>Great item that combines both the lorem ipsum and doloret something.</small>
</div>
</div>
</div>
<div class="col-sm-5 col-xs-12">
<div class="cl-title">
<h4>Hot This Month</h4>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h5>Woman Accesories</h5>
<div class="hot-sell-item">
<img src="assets/images/138.jpg" width="130" height="130" alt="alt text"/>
<p>
<span>Price: $137</span>
<small>This product is labeled as lorem ipsum</small>
</p>
</div>
<div class="hot-sell-item">
<img src="assets/images/139.jpg" width="130" height="130" alt="alt text"/>
<p>
<span>Price: $139</span>
<small>This product is labeled as lorem ipsum</small>
</p>
</div>
<div class="hot-sell-item">
<img src="assets/images/141.jpg" width="130" height="130" alt="alt text"/>
<p>
<span>Price: $141</span>
<small>This product is labeled as lorem ipsum</small>
</p>
</div>
</div>
<div class="item">
<h5>Woman Bags</h5>
<div class="hot-sell-item">
<img src="assets/images/131.jpg" width="130" height="130" alt="alt text"/>
<p>
<span>Price: $137</span>
<small>This product is labeled as lorem ipsum</small>
</p>
</div>
<div class="hot-sell-item">
<img src="assets/images/134.jpg" width="130" height="130" alt="alt text"/>
<p>
<span>Price: $139</span>
<small>This product is labeled as lorem ipsum</small>
</p>
</div>
<div class="hot-sell-item">
<img src="assets/images/135.jpg" width="130" height="130" alt="alt text"/>
<p>
<span>Price: $141</span>
<small>This product is labeled as lorem ipsum</small>
</p>
</div>
</div>
<div class="item">
<h5>Woman Shoes</h5>
<div class="hot-sell-item">
<img src="assets/images/155.jpg" width="130" height="130" alt="alt text"/>
<p>
<span>Price: $137</span>
<small>This product is labeled as lorem ipsum</small>
</p>
</div>
<div class="hot-sell-item">
<img src="assets/images/159.jpg" width="130" height="130" alt="alt text"/>
<p>
<span>Price: $139</span>
<small>This product is labeled as lorem ipsum</small>
</p>
</div>
<div class="hot-sell-item">
<img src="assets/images/162.jpg" width="130" height="130" alt="alt text"/>
<p>
<span>Price: $141</span>
<small>This product is labeled as lorem ipsum</small>
</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</li>
<li class="menu-el">
<a><i class="icon-envelope"></i>Contact</a>
<div class="mdf_sub_wrap row mdf_flip">
<div class="cl-title">
<h3>Get in Touch</h3>
</div>
<div class="col-sm-4 col-md-3 col-xs-12">
<img class="img-responsive support" src="assets/images/spt.jpg" alt="alt text" />
</div>
<div class="col-sm-4 col-md-3 col-xs-12">
<form id="contact-form" class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="name" placeholder="your name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="email" placeholder="your email">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="subject" placeholder="subject">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<textarea name="message" class="form-control" rows="3" placeholder="Type your message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<button type="submit" class="btn btn-default" id="send">Send Message</button>
</div>
</div>
<div id="success"></div>
</form>
</div>
<div class="col-sm-4 col-md-6 col-xs-12">
<div id="location" class="gmap3"></div>
</div>
</div>
</li>
<li class="menu-el">
<a><i class="glyphicon glyphicon-info-sign"></i>About</a>
<div class="mdf_sub_wrap row mdf_flip">
<div class="cl-title">
<h3>Who Are We</h3>
</div>
<div class="col-sm-4 col-xs-12 mdf_team">
<div class="cl-title">
<h4>Behind this thing</h4>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<a class="thumbnail">
<img src="assets/images/mb2.jpg" height="114" alt="alt text"/>
</a>
<div class="caption">
<h5>Mirko Stankovic</h5>
<p>Lorem ipsum doloret si ipsum</p>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<a class="thumbnail">
<img src="assets/images/mb1.jpg" height="114" alt="alt text"/>
</a>
<div class="caption">
<h5>Zoran Vulovic</h5>
<p>Lorem ipsum doloret si ipsum</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12 mdf_team">
<div class="cl-title">
<h4>We Got Skills</h4>
</div>
<div class="progress">
<label>Javascript</label>
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
<div class="progress">
<label>CSS</label>
<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
80%
</div>
</div>
<div class="progress">
<label>PHP</label>
<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;">
72%
</div>
</div>
<div class="progress">
<label>HTML</label>
<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
80%
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12 mdf_team">
<div class="cl-title">
<h4>Contact</h4>
</div>
<ul class="list-group cont-list">
<li class="list-group-item"><i class="icon-phone"></i>Tel/Fax: +23823726532</li>
<li class="list-group-item"><i class="icon-envelope"></i>eMail: lorem@ipsum.com</li>
<li class="list-group-item"><i class="icon-map"></i>Location: Harbidl e Street, PM</li>
<li>
<span id="socials">
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-googleplus"></i>
<i class="icon-linkedin"></i>
<em>We are social</em>
</span>
</li>
</ul>
</div>
</div>
</li>
<li class="menu-el">
<a><i class="glyphicon glyphicon-th"></i>Grid System</a>
<div class="mdf_sub_wrap demo-grid row mdf_flip">
<div class="row">
<div class="col-md-12">.col-md-12</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-7">.col-md-7</div>
<div class="col-md-5">.col-md-5</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-8">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
</li>
<li class="menu-el">
<a><i class="icon-layers"></i>Tabbed</a>
<div class="mdf_sub_wrap row mdf_flip">
<div class="col-sm-3 col-xs-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-left"><!-- 'tabs-right' for right tabs -->
<li class="active"><a href="#bags" data-toggle="tab">Bags</a></li>
<li><a href="#accessories" data-toggle="tab">Accessories</a></li>
<li><a href="#shoes" data-toggle="tab">Shoes</a></li>
<li><a href="#dresses" data-toggle="tab">Dresses</a></li>
</ul>
</div>
<div class="col-sm-9 col-xs-12">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="bags">
<div class="tabs-demo owl-carousel owl-theme">
<div class="item">
<img src="assets/images/bags/131.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Bag</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/bags/137.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Bag</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/bags/132.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Bag</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/bags/133.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Bag</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/bags/136.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Bag</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/bags/137.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Bag</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
</div>
</div>
<div class="tab-pane" id="accessories">
<div class="tabs-demo owl-carousel owl-theme">
<div class="item">
<img src="assets/images/accessories/142.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Accessory</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/accessories/143.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Accessories</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/accessories/145.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Accessories</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/accessories/147.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Accessories</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/accessories/148.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Accessories</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/accessories/145.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Accessories</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/accessories/147.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Accessories</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
</div>
</div>
<div class="tab-pane" id="shoes">
<div class="tabs-demo owl-carousel owl-theme">
<div class="item">
<img src="assets/images/shoes/153.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Shoes</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/shoes/155.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Shoes</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/shoes/160.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Shoes</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/shoes/162.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Shoes</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/shoes/163.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Shoes</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/shoes/160.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Shoes</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/shoes/162.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Shoes</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
</div>
</div>
<div class="tab-pane" id="dresses">
<div class="tabs-demo owl-carousel owl-theme">
<div class="item">
<img src="assets/images/dresses/20.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Dresses</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/dresses/21.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Dresses</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/dresses/22.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Dresses</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/dresses/23.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Dresses</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/dresses/24.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Dresses</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
<div class="item">
<img src="assets/images/dresses/26.jpg" width="150" alt="alt text"/>
<span class="capt">
<span class="prod-title">Woman Dresses</span>
<span class="price">$39</span>
<a href="#">View Details</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="right-nav">
<li>
<div class="search-box">
<input type="text" placeholder="Find Stuff">
<a href="#" class="search-button"></a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<section id="features">
<div id="ftr">
<h2>Features</h2>
</div>
<div class="row">
<div class="col-sm-3 col-xs-6">
<span class="icon-browser"></span>
<h4>3 Pre-defined Layouts</h4>
</div>
<div class="col-sm-3 col-xs-6">
<span class="icon-hourglass"></span>
<h4>3 Animations</h4>
</div>
<div class="col-sm-3 col-xs-6">
<span class="glyphicon glyphicon-fullscreen"></span>
<h4>Fully Responsive</h4>
</div>
<div class="col-sm-3 col-xs-6">
<span class="icon-mobile"></span>
<h4>Touch Device Friendly</h4>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-xs-6">
<span class="icon-grid"></span>
<h4>Bootstrap Navigation and grid system used</h4>
</div>
<div class="col-sm-3 col-xs-6">
<span class="glyphicon glyphicon-envelope"></span>
<h4>Working Contact Form</h4>
</div>
<div class="col-sm-3 col-xs-6">
<span class="glyphicon glyphicon-font"></span>
<h4>3 Web Fonts Included</h4>
</div>
<div class="col-sm-3 col-xs-6">
<span class="glyphicon glyphicon-thumbs-up"></span>
<h4>Easy To Use</h4>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-xs-6">
<span class="glyphicon glyphicon-chevron-down"></span>
<h4>Dropdowns</h4>
</div>
<div class="col-sm-3 col-xs-6">
<span class="icon-layers"></span>
<h4>Megamenu Wizard Builder Included</h4>
</div>
<div class="col-sm-3 col-xs-6">
<span class="icon-notebook"></span>
<h4>Megamenu Wizard Builder Documentation</h4>
</div>
<div class="col-sm-3 col-xs-6">
<span class="icon-compass"></span>
<h4>Cross Browser Compatibility</h4>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-xs-6">
<span class="icon-compass"></span>
<h4>Pure CSS3 Animations</h4>
</div>
<div class="col-sm-3 col-xs-6">
<span class="icon-genius"></span>
<h4>Easy integration to any Web Projects</h4>
</div>
</div>
</section>
<div id="switcher"></div>
<div></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="assets/js/jquery-1.9.1.min.js" defer="defer"></script>
<script src="assets/js/owl.carousel.min.js" defer="defer"></script>
<script src="assets/js/gmap3.min.js" defer="defer"></script>
<script src="assets/js/bootstrap.min.js" defer="defer"></script>
<script src="assets/js/spectrum.min.js" defer="defer"></script>
<script src="assets/js/mdf_js.js" defer="defer"></script>
<script src="assets/js/demo.js" defer="defer"></script>
<script src="assets/js/styleswitch.js" defer="defer"></script>
</body>
</html>
Download tại đây
Lời Kết: qua bài này các bạn cũng đã tạo được một menu đẹp với MDF Megamenu - Bootstrap Responsive Megamenu rồi đúng không. chúc các bạn làm thành công nhé.
3 nhận xét
nhận xétCái ô tác giả nó hiện đoạn văn 2 lần kìa
Replythanks 1 cái nó lấy từ site còn 1 cáy nó lấy từ g+ qua
ReplyLink oni bị hư rồi bạn ơi
Reply