Hôm nay mình sẽ hướng dẫn Cách chỉnh thanh nav menu đẹp trên template median ui 1.5 nha mọi người.
 |
| Chia sẻ cách chỉnh thanh nav menu đẹp trên template median ui 1.5. |
Hướng dẫn thực hiện
Bước 1: Tìm đoạn mã <li class='dropDown'> và xóa hết đến thẻ đóng </li> đầu tiên chỉnh thành code sau:
<li class='dropDown'>
<input class='dropMenu hidden' id='offdropMenu1' name='dropDown' type='checkbox' />
<label class='link' for='offdropMenu1'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line x1='6.6787' x2='12.4937' y1='12.0742685' y2='12.0742685'></line><path d='M-1.13686838e-13,5.29836453 C-1.13686838e-13,2.85645977 1.25,0.75931691 3.622,0.272650243 C5.993,-0.214968804 7.795,-0.0463973758 9.292,0.761221672 C10.79,1.56884072 10.361,2.76122167 11.9,3.63645977 C13.44,4.51265024 15.917,3.19645977 17.535,4.94217405 C19.229,6.7697931 19.2200005,9.57550739 19.2200005,11.3640788 C19.2200005,18.1602693 15.413,18.6993169 9.61,18.6993169 C3.807,18.6993169 -1.13686838e-13,18.2288407 -1.13686838e-13,11.3640788 L-1.13686838e-13,5.29836453 Z'></path></g></svg>
<span class='name'>Categories</span>
<svg class='line down' viewBox='0 0 24 24'><g transform='translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'></path></g></svg>
</label>
<ul>
<li itemprop='name'><a href='/search/label/template' itemprop='url'>Template</a></li>
<li itemprop='name'><a href='/search/label/blogger' itemprop='url'>Blogger</a></li>
<li itemprop='name'><a href='/search/label/facebook' itemprop='url'>Facebook</a></li>
<li itemprop='name'><a href='/search/label/thu-thuat' itemprop='url'>Thủ thuật</a></li>
<li itemprop='name'><a href='/search/label/lap-trinh' itemprop='url'>Lập trình</a></li>
<li itemprop='name'><a href='/search/label/thuat-toan' itemprop='url'>Thuật toán</a></li>
<li itemprop='name'><a href='/search/label/tam-su' itemprop='url'>Tâm sự</a></li>
</ul>
</li>
<li class='dropDown break'>
<input class='dropMenu hidden' id='offdropMenu2' name='dropDown' type='checkbox' />
<label class='link' for='offdropMenu2'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.900000, 4.600000)'><line x1='4.0791' x2='4.0791' y1='0.0013' y2='12.6193'></line><path d='M-2.57571742e-14,4.1 C-2.57571742e-14,4.1 2.169,1.0658141e-14 4.078,1.0658141e-14 C5.986,1.0658141e-14 8.156,4.1 8.156,4.1'></path><line x1='14.0059' x2='14.0059' y1='14.8275' y2='2.2095'></line><path d='M18.085,10.7284 C18.085,10.7284 15.915,14.8284 14.007,14.8284 C12.099,14.8284 9.929,10.7284 9.929,10.7284'></path></g></svg>
<span class='name'>Tools</span>
<svg class='line down' viewBox='0 0 24 24'><g transform='translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'></path></g></svg>
</label>
<ul>
<li itemprop='name'><a href='/p/ma-hoa-code-thanh-ky-tu-thuc-the.html' itemprop='url' title='Ký tự thực thể'>Ký tự thực thể</a></li>
<li itemprop='name'><a href='/p/html-parser-tool.html' itemprop='url' title='HTML Parser Tool'>HTML Parser Tool</a></li>
<li itemprop='name'><a href='/p/tao-chu-hinh-trai-tim.html' itemprop='url' title='Tạo chữ hình trái tim'>Tạo chữ hình trái tim</a></li>
<li itemprop='name'><a href='/p/tinh-diem-tot-nghiep.html' itemprop='url' title='Tính điểm tốt nghiệp'>Tính điểm tốt nghiệp</a></li>
<li itemprop='name'><a href='/p/tao-url-tu-tieu-de-bai-viet.html' itemprop='url' title='Tạo URL từ tiêu đề'>Tạo URL từ tiêu đề</a></li>
<li itemprop='name'><a href='/p/lay-ma-mau-tu-anh.html' itemprop='url' title='Lấy mã màu từ ảnh'>Lấy mã màu từ ảnh</a></li>
<li itemprop='name'><a href='/p/nen-css.html' itemprop='url' title='Nén css'>Nén css</a></li>
<li itemprop='name'><a href='/2021/06/cong-cu-tang-view-cho-blog-website.html' itemprop='url' title='Công cụ tăng view cho blog/website'>Tăng views</a></li>
<li itemprop='name'><a href='/p/github-to-jsdelivr.html' itemprop='url' title='Chuyển đổi github sang jsdelivr'>GitHub to jsDelivr</a></li>
<li itemprop='name'><a href='/p/search.html' itemprop='url' title='Tìm kiếm trên Code Pro'>Code Pro Search</a></li>
<li itemprop='name'><a href='/p/decode.html' itemprop='url' title='Giải mã code'>Code Pro Decode</a></li>
<li itemprop='name'><a href='/p/feeds.html' itemprop='url' title='Nguồn cấp dữ liệu Code Pro'>Code Pro Feeds</a></li>
</ul>
</li>
<li>
<a class='link' href='/about' itemprop='url'>
<svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(2.749500, 2.549500)'><path d='M6.809,18.9067 C3.137,18.9067 9.41469125e-14,18.3517 9.41469125e-14,16.1277 C9.41469125e-14,13.9037 3.117,11.8997 6.809,11.8997 C10.481,11.8997 13.617,13.8847 13.617,16.1077 C13.617,18.3307 10.501,18.9067 6.809,18.9067 Z'></path><path d='M6.809,8.728 C9.219,8.728 11.173,6.774 11.173,4.364 C11.173,1.954 9.219,-2.48689958e-14 6.809,-2.48689958e-14 C4.399,-2.48689958e-14 2.44496883,1.954 2.44496883,4.364 C2.436,6.766 4.377,8.72 6.778,8.728 L6.809,8.728 Z'></path><path d='M14.0517,7.5293 C15.4547,7.1543 16.4887007,5.8753 16.4887007,4.3533 C16.4897,2.7653 15.3627,1.4393 13.8647,1.1323'></path><path d='M14.7113,11.104 C16.6993,11.104 18.3973,12.452 18.3973,13.655 C18.3973,14.364 17.8123,15.092 16.9223,15.301'></path></g></svg>
<span class='name' itemprop='name'>About</span>
</a>
</li>
<li>
<a class='link' href='/contact' itemprop='url'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.452080, 2.851980)'><path d='M15.0928322,6.167017 C15.0928322,6.167017 11.8828071,10.0196486 9.53493746,10.0196486 C7.18807029,10.0196486 3.941955,6.167017 3.941955,6.167017'></path><path d='M1.04805054e-13,9.11679198 C1.04805054e-13,2.27869674 2.38095238,8.8817842e-15 9.52380952,8.8817842e-15 C16.6666667,8.8817842e-15 19.047619,2.27869674 19.047619,9.11679198 C19.047619,15.9538847 16.6666667,18.233584 9.52380952,18.233584 C2.38095238,18.233584 1.04805054e-13,15.9538847 1.04805054e-13,9.11679198 Z'></path></g></svg>
<span class='name' itemprop='name'>Contact</span>
</a>
</li>
<li class='break'>
<a class='link' href='https://www.messenger.com/t/leanhduc.pro.vn' itemprop='url' target='_blank'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line x1='13.9394' x2='13.9484' y1='10.413' y2='10.413'></line><line x1='9.9304' x2='9.9394' y1='10.413' y2='10.413'></line><line x1='5.9214' x2='5.9304' y1='10.413' y2='10.413'></line><path d='M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z'></path></g></svg>
<span class='name now' itemprop='name'>Messenger</span>
</a>
</li>
<li>
<a class='link' href='/search/label/template-premium' itemprop='url'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(3.650200, 2.850200)'><path d='M2.044,3.58024493 C7.3705141,2.243 13.9926469,2.32498848 15.5231061,4.06777179 C17.0535652,5.8105551 17.0220031,11.638 15.2330031,13.237 C13.4450031,14.836 5.68,14.988 3.22,13.237 C0.621,11.386 2.129,5.692 2.044,2.243 C2.095,0.313 -1.13686838e-13,0 -1.13686838e-13,0'></path><line x1='10.5059' x2='13.2789' y1='7.8696' y2='7.8696'></line><path d='M3.6138,17.2773 C3.9138,17.2773 4.1578,17.5213 4.1578,17.8213 C4.1578,18.1223 3.9138,18.3663 3.6138,18.3663 C3.3128,18.3663 3.0688,18.1223 3.0688,17.8213 C3.0688,17.5213 3.3128,17.2773 3.6138,17.2773 Z'></path><path d='M13.9453,17.2773 C14.2463,17.2773 14.4903,17.5213 14.4903,17.8213 C14.4903,18.1223 14.2463,18.3663 13.9453,18.3663 C13.6453,18.3663 13.4013,18.1223 13.4013,17.8213 C13.4013,17.5213 13.6453,17.2773 13.9453,17.2773 Z'></path></g></svg>
<span class='name premium' itemprop='name'>Template</span>
</a>
</li>
<li>
<a class='link' href='/search/label/template-free' itemprop='url'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line x1='9.8791' x2='9.8791' y1='12.791' y2='0.75'></line><polyline points='12.7951 9.8642 9.8791 12.7922 6.9631 9.8642'></polyline><path d='M14.3703,5.2587 C17.9493,5.5887 19.2503,6.9287 19.2503,12.2587 C19.2503,19.3587 16.9393,19.3587 10.0003,19.3587 C3.0593,19.3587 0.7503,19.3587 0.7503,12.2587 C0.7503,6.9287 2.0503,5.5887 5.6303,5.2587'></path></g></svg>
<span class='name free' itemprop='name'>Template</span>
</a>
</li>
<li class='break'>
<a class='link' href='/search/label/blogger' itemprop='url'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line x1='6.6787' x2='12.4937' y1='12.0742685' y2='12.0742685'></line><path d='M-1.13686838e-13,5.29836453 C-1.13686838e-13,2.85645977 1.25,0.75931691 3.622,0.272650243 C5.993,-0.214968804 7.795,-0.0463973758 9.292,0.761221672 C10.79,1.56884072 10.361,2.76122167 11.9,3.63645977 C13.44,4.51265024 15.917,3.19645977 17.535,4.94217405 C19.229,6.7697931 19.2200005,9.57550739 19.2200005,11.3640788 C19.2200005,18.1602693 15.413,18.6993169 9.61,18.6993169 C3.807,18.6993169 -1.13686838e-13,18.2288407 -1.13686838e-13,11.3640788 L-1.13686838e-13,5.29836453 Z'></path></g></svg>
<span class='name' itemprop='name'>Blogger</span>
</a>
</li>
<li>
<a class='link' href='/sitemap' itemprop='url'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(3.610000, 2.750100)'><line x1='11.9858' x2='4.7658' y1='12.9463' y2='12.9463'></line><line x1='11.9858' x2='4.7658' y1='9.1865' y2='9.1865'></line><line x1='7.521' x2='4.766' y1='5.4272' y2='5.4272'></line><path d='M7.63833441e-14,9.25 C7.63833441e-14,16.187 2.098,18.5 8.391,18.5 C14.685,18.5 16.782,16.187 16.782,9.25 C16.782,2.313 14.685,0 8.391,0 C2.098,0 7.63833441e-14,2.313 7.63833441e-14,9.25 Z'></path></g></svg>
<span class='name' itemprop='name'>Sitemap</span>
</a>
</li>
<li>
<a class='link dmca-badge' href='//www.dmca.com/Protection/Status.aspx?ID=82a916ce-5bcc-4833-abf8-06ebad6f48ea' itemprop='url' target='_blank' title='DMCA.com Protection Status'>
<script src='https://images.dmca.com/Badges/DMCABadgeHelper.min.js'></script>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M8.4845,19.6057 C10.8195,19.6057 16.1565,17.2837 16.1565,10.8787 C16.1565,4.4747 16.4345,3.9737 15.8195,3.3577 C15.2035,2.7417 11.9935,0.7507 8.4845,0.7507 C4.9755,0.7507 1.7655,2.7417 1.1505,3.3577 C0.5345,3.9737 0.8125,4.4747 0.8125,10.8787 C0.8125,17.2837 6.1505,19.6057 8.4845,19.6057 Z'></path><polyline points='5.8859 9.8748 7.7779 11.7698 11.6759 7.8698'></polyline></g></svg>
<span class='name' itemprop='name'>DMCA</span>
</a>
</li>
<li class='break'>
<a class='link' href='/privacy' itemprop='url'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M12.9709,7.4033 L12.9709,5.2543 C12.9399,2.7353 10.8719,0.7193 8.3539,0.7503 C5.8869,0.7813 3.8919,2.7673 3.8499,5.2343 L3.8499,7.4033'></path><line x1='8.4103' x2='8.4103' y1='12.1562' y2='14.3772'></line><path d='M8.4103,6.8242 C2.6653,6.8242 0.7503,8.3922 0.7503,13.0952 C0.7503,17.7992 2.6653,19.3672 8.4103,19.3672 C14.1553,19.3672 16.0713,17.7992 16.0713,13.0952 C16.0713,8.3922 14.1553,6.8242 8.4103,6.8242 Z'></path></g></svg>
<span class='name' itemprop='name'>Privacy</span>
</a>
</li>
</ul>Bước 2: Lưu lại nha
Nếu bạn muốn chia sẻ lại lên blog bạn thì vui lòng nhớ ghi nguồn.
Copyright © Ngô Vi Minh Hiếu
