Refresh
Đối tác của ANewPlus ANewTips Xem Ngay!

Two thousand a sour orange

Chia sẻ cách chỉnh thanh nav menu đẹp trên template median ui 1.5.

Ở các bài viết trước mình có hướng dẫn mọi người chỉnh sửa template median ui. 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.



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

Bài viết liên quan:

Rate Articles:

4 comments

  1. Share template anh dùng đi
  2. a share rùi xem bài a viết https://ngoviminhhieuvn.blogspot.com/2022/02/share-free-template-median-ui-version.html
  3. Chỉ tự ẩn menu điều hướng cho gọn trên laptop đi a
    1. cái này em tự tìm cách để chỉnh css menu nha