Mega Dropdown Menu

Có 2 cách để bạn thêm Mega menu vào blog:

Cách 1: là các bạn chèn tất cả code của nó vào 1 widget HTML/javascript

Cách 2: là các bạn chỉ chèn code HTML vào widget HTML/javascript, còn code CSS thì các bạn add vào template, ngay trước dòng code </head>

Mega Menu Demo:

• Menu 1
• Menu 2

  Love

  Sub 2.1 Sub 2.2 Sub 2.3

  Film

  Sub 2.1 Sub 2.2 Sub 2.3

  Ebooks

  Sub 2.1 Sub 2.2 Sub 2.3
• Menu 3
  Sub 3.1 (120px) Sub 3.2 (120px) Sub 3.3 (120px)

  Sub 3.1 (120px) Sub 3.2 (120px) Sub 3.3 (120px)
• Menu 4
• Menu 5
  James Gallagher
  Health reporter, BBC News
  Are bean sprouts in the clear? The simple answer is no, even though the early test results have come back negative.
  The most compelling evidence so far has not come from the microbiology lab, but traditional detective work. Officials were able to link the main outbreaks with bean sprouts from one farm in northern Germany.
  They will wait for test results from the remaining 17 samples for final confirmation. However, the prospect remains that no trace of E. coli will ever be found, since any contaminated produce would have been farmed and on the shelves weeks ago.
  Trich BBC

Code Cách 1:

<style type="text/css">#fdmega-menu ul {list-style: none;} ul#topnav { float: left; width: 650px; position: relative; height: 39px; background: #0082ff; } ul#topnav li { float: left; height: 39px; padding: 0px; background: url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/right-li-nobg.png) no-repeat top right; } ul#topnav li a { padding: 10px 15px; display: block; color: #f0f0f0; text-decoration: none; } ul#topnav li:hover { background: #ff7d00 url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/top-li-hv.png) repeat-x top left; } ul#topnav li.mg-home { background:url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/home-ico-bg.png) no-repeat top right!important; width:45px; } ul#topnav li.mg-home a {height:19px;} ul#topnav li div.sub { position: absolute; top: 39px; background: #ff7d00; padding:5px; display: none; border-right:4px solid #0082ff; border-left:4px solid #0082ff; border-bottom:4px solid #0082ff; color:#fff; } ul#topnav li:hover div.sub {display: block;} ul#topnav li div.sub p {margin-bottom:5px;text-align:justify;} ul#topnav li div.sub div.cont {float: left;padding:5px;} ul#topnav li div.sub div.cont h3 {} ul#topnav li div.sub div.cont a{display:block; margin:0;padding:0;padding:0 0 5px;color:#ddd;} ul#topnav li div.sub div.cont a:hover{color:#fff;} ul#topnav li div.ms1 {} ul#topnav li div.ms2 {width:300px;left: 118px;} ul#topnav li div.ms3 {width:260px;left: 195px;} ul#topnav li div.ms4 {} ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;} ul#topnav li div.sub div.cs21 {width:90px;} ul#topnav li div.sub div.cs31 {width:120px;} </style> <div id="fdmega-menu"> <ul id="topnav"> <li class="mg-home"><a href="#"></a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a> <div class="sub ms2"> <div class="cont cs21"> <h3> Love</h3> <a href="#">Sub 2.1</a> <a href="#">Sub 2.2</a> <a href="#">Sub 2.3</a> </div> <div class="cont cs21"> <h3> Film</h3> <a href="#">Sub 2.1</a> <a href="#">Sub 2.2</a> <a href="#">Sub 2.3</a> </div> <div class="cont cs21"> <h3> Ebooks</h3> <a href="#">Sub 2.1</a> <a href="#">Sub 2.2</a> <a href="#">Sub 2.3</a> </div> </div> </li> <li><a href="#">Menu 3</a> <div class="sub ms3"> <div class="cont cs31"> <a href="#">Sub 3.1 (120px)</a> <a href="#">Sub 3.2 (120px)</a> <a href="#">Sub 3.3 (120px)</a> </div> <div class="cont cs31"> <a href="#">Sub 3.1 (120px)</a> <a href="#">Sub 3.2 (120px)</a> <a href="#">Sub 3.3 (120px)</a> </div> </div> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a> <div class="sub ms5"> <b>James Gallagher</b><br/> <span style="font-size:90%"><i>Health reporter, BBC News</i></span> <p> Are bean sprouts in the clear? The simple answer is no, even though the early test results have come back negative.</p> <p> The most compelling evidence so far has not come from the microbiology lab, but traditional detective work. Officials were able to link the main outbreaks with bean sprouts from one farm in northern Germany.</p> <p> They will wait for test results from the remaining 17 samples for final confirmation. However, the prospect remains that no trace of E. coli will ever be found, since any contaminated produce would have been farmed and on the shelves weeks ago.</p> <span style="font-size:90%"><i>Trich BBC</i></span> </div> </li> </ul> </div>

Code Cách 2-A. Chèn đoạn code trên thẻ </head>:

<style type="text/css">#fdmega-menu ul {list-style: none;} ul#topnav { float: left; width: 650px; position: relative; height: 39px; background: #0082ff; } ul#topnav li { float: left; height: 39px; padding: 0px; background: url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/right-li-nobg.png) no-repeat top right; } ul#topnav li a { padding: 10px 15px; display: block; color: #f0f0f0; text-decoration: none; } ul#topnav li:hover { background: #ff7d00 url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/top-li-hv.png) repeat-x top left; } ul#topnav li.mg-home { background:url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/home-ico-bg.png) no-repeat top right!important; width:45px; } ul#topnav li.mg-home a {height:19px;} ul#topnav li div.sub { position: absolute; top: 39px; background: #ff7d00; padding:5px; display: none; border-right:4px solid #0082ff; border-left:4px solid #0082ff; border-bottom:4px solid #0082ff; color:#fff; } ul#topnav li:hover div.sub {display: block;} ul#topnav li div.sub p {margin-bottom:5px;text-align:justify;} ul#topnav li div.sub div.cont {float: left;padding:5px;} ul#topnav li div.sub div.cont h3 {} ul#topnav li div.sub div.cont a{display:block; margin:0;padding:0;padding:0 0 5px;color:#ddd;} ul#topnav li div.sub div.cont a:hover{color:#fff;} ul#topnav li div.ms1 {} ul#topnav li div.ms2 {width:300px;left: 118px;} ul#topnav li div.ms3 {width:260px;left: 195px;} ul#topnav li div.ms4 {} ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;} ul#topnav li div.sub div.cs21 {width:90px;} ul#topnav li div.sub div.cs31 {width:120px;} </style>

Code Cách 2-B. Chèn đoạn code bên dưới vào widget HTML/javascript

<div id="fdmega-menu"> <ul id="topnav"> <li class="mg-home"><a href="#"></a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a> <div class="sub ms2"> <div class="cont cs21"> <h3> Love</h3> <a href="#">Sub 2.1</a> <a href="#">Sub 2.2</a> <a href="#">Sub 2.3</a> </div> <div class="cont cs21"> <h3> Film</h3> <a href="#">Sub 2.1</a> <a href="#">Sub 2.2</a> <a href="#">Sub 2.3</a> </div> <div class="cont cs21"> <h3> Ebooks</h3> <a href="#">Sub 2.1</a> <a href="#">Sub 2.2</a> <a href="#">Sub 2.3</a> </div> </div> </li> <li><a href="#">Menu 3</a> <div class="sub ms3"> <div class="cont cs31"> <a href="#">Sub 3.1 (120px)</a> <a href="#">Sub 3.2 (120px)</a> <a href="#">Sub 3.3 (120px)</a> </div> <div class="cont cs31"> <a href="#">Sub 3.1 (120px)</a> <a href="#">Sub 3.2 (120px)</a> <a href="#">Sub 3.3 (120px)</a> </div> </div> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a> <div class="sub ms5"> <b>James Gallagher</b><br/> <span style="font-size:90%"><i>Health reporter, BBC News</i></span> <p> Are bean sprouts in the clear? The simple answer is no, even though the early test results have come back negative.</p> <p> The most compelling evidence so far has not come from the microbiology lab, but traditional detective work. Officials were able to link the main outbreaks with bean sprouts from one farm in northern Germany.</p> <p> They will wait for test results from the remaining 17 samples for final confirmation. However, the prospect remains that no trace of E. coli will ever be found, since any contaminated produce would have been farmed and on the shelves weeks ago.</p> <span style="font-size:90%"><i>Trich BBC</i></span> </div> </li> </ul> </div>