分享个我自用的手机底部导航代码

应用开发者 唯爱李琴 2月前 179

分享的是的代码不是插件,会点网页基础的自己改改加到模板里面就行了,效果或可以到我博客看http://www.su1018.cn

图标使用的是阿里svg图标,可以自己到图标官网寻找自己需要的,另外这个代码只有在网页窗口小于1200的时候才会显示,电脑上看不出效果,手机查看最佳

HTML代码

<aside class="mobile_btn">
    <ul>
                <li>
            <a href="http://www.su1018.cn/">
                <svg t="1583505367171" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1640" width="200" height="200"><path d="M991.031645 443.297689L603.190321 38.854778C579.171004 13.775785 547.027506 0 512.058206 0s-66.406347 13.775785-91.132114 38.854778L33.084767 443.297689c-39.914453 41.327354-35.322525 77.709555-28.25802 93.251466 4.945154 10.596758 20.84029 39.914453 66.406347 39.914453h56.869265v310.484995c0 70.64505 51.217661 137.051397 122.922387 137.051397h124.335288c22.606416 0 40.974129-18.367713 40.974129-40.974129v-288.231804c0-35.322525-5.651604-54.749914 30.730597-54.749914h130.340117c36.382201 0 30.730597 19.780614 30.730597 54.749914v287.525353c0 22.606416 18.367713 40.974129 40.974129 40.974129h124.335288c72.057951 0 122.922387-66.053122 122.922387-137.051397v-310.484994h56.869266c45.919283 0 61.814419-29.317696 66.406347-39.914454 6.004829-14.835461 11.303208-50.511211-28.611246-92.545015z m-38.501552 69.232149h-121.156261v374.418765c0 35.322525-22.606416 73.117627-58.988616 73.117627h-101.375647v-264.918938c0-70.64505-22.606416-118.683684-95.017593-118.683684h-130.340117c-72.057951 0-95.017592 48.745085-95.017592 118.683684v264.918938H250.671521c-36.382201 0-58.988617-37.441877-58.988617-73.117627V512.529838H70.526644c-1.059676 0-2.119352-4.591928-3.179028-4.591928 2.119352-4.238703 6.004829-13.775785 12.362884-20.487065L467.551825 84.06761c11.303208-11.656433 28.25802-19.427389 44.153156-19.427389s31.083822 7.064505 43.09348 19.427389l388.547776 403.383235c6.71128 6.71128 10.243532 16.248362 12.362883 20.487065-0.353225 0-1.412901 4.591928-2.472576 4.591928z" p-id="1641"></path></svg>首页            </a>
        </li>
		                <li>
            <a href="http://www.su1018.cn/">
                <svg t="1583505293353" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1383" width="200" height="200"><path d="M512.091028 951.571006H151.96733c-29.757649 0-53.788354-24.142998-53.788354-53.788354V126.217348c0-29.757649 24.142998-53.788354 53.788354-53.788354h720.135102c29.757649 0 53.788354 24.142998 53.788354 53.788354v352.038601c0 12.913697 6.849874 24.929049 18.079176 31.329751 11.229301 6.512995 25.041342 6.512995 36.15835 0 11.229301-6.512995 18.079175-18.416054 18.079176-31.329751V126.217348C998.095195 56.595679 941.724101 0.112293 871.990139 0H151.855037C82.233368 0.112293 25.749981 56.595679 25.637688 126.217348v771.565304c0.112293 69.621669 56.483386 126.105055 126.217349 126.217348h360.123698c19.988157 0 36.158351-16.170194 36.15835-36.158351s-16.170194-36.158351-36.15835-36.15835z m233.120298-689.703696c0-19.988157-16.170194-36.158351-36.158351-36.158351H232.256835c-19.988157 0-36.158351 16.170194-36.158351 36.158351s16.170194 36.158351 36.158351 36.158351h476.79614c19.988157 0 36.158351-16.170194 36.158351-36.158351zM427.422095 508.013598c0-19.988157-16.170194-36.158351-36.158351-36.158351H228.214287c-12.913697 0-24.929049 6.849874-31.329751 18.079176-6.512995 11.229301-6.512995 25.041342 0 36.15835 6.512995 11.229301 18.416054 18.079175 31.329751 18.079176h163.049457c19.988157 0 36.158351-16.170194 36.158351-36.158351zM228.101994 716.429433c-19.988157 0-36.158351 16.170194-36.158351 36.158351s16.170194 36.158351 36.158351 36.15835h163.049457c19.988157 0 36.158351-16.170194 36.158351-36.15835s-16.170194-36.158351-36.158351-36.158351H228.101994z m760.897466 185.058888L851.103639 763.143327c23.244654-33.126439 35.596886-72.541287 35.596885-112.966773 0-108.924224-88.262309-197.298827-197.298826-197.298826s-197.298827 88.262309-197.298827 197.298826 88.262309 197.298827 197.298827 197.298827c41.548415 0.112293 82.086194-13.138283 115.774098-37.505867l137.446649 137.895822c12.801404 12.576818 33.463318 12.576818 46.152429-0.224586 12.689111-12.689111 12.801404-33.351025 0.224586-46.152429zM689.401698 781.896261c-62.884088 0-117.009321-44.355741-129.24926-106.004606s20.774208-123.410023 78.829696-147.440728 125.094418-3.705669 160.017546 48.510582 28.073254 121.950214-16.39478 166.305955c-24.704463 24.816756-58.167782 38.74109-93.203202 38.628797z" p-id="1384"></path></svg>搜索            </a>
        </li>
                        <li>
            <a href="http://www.su1018.cn/">
                <svg t="1583505333393" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1510" width="200" height="200"><path d="M769.200436 430.146278H258.194611c-8.616181 0-16.569579-3.313916-21.871845-9.278964-5.965049-5.302265-9.278964-13.255663-9.278964-21.871845s3.313916-15.906796 9.278964-21.871844c5.965049-5.302265 13.255663-9.278964 21.871845-9.278965h511.005825c8.616181 0 16.569579 3.313916 21.871845 9.278965 5.965049 5.302265 9.278964 13.255663 9.278964 21.871844s-3.313916 15.906796-9.278964 21.871845c-5.965049 5.302265-13.255663 9.278964-21.871845 9.278964zM620.737006 606.446602H258.194611c-8.616181 0-16.569579-3.976699-21.871845-9.941748-5.965049-5.965049-9.278964-14.58123-9.278964-23.197411s3.313916-17.232362 9.278964-23.197411 13.255663-9.941748 21.871845-9.941747h362.542395c8.616181 0 16.569579 3.976699 21.871844 9.941747 5.965049 5.965049 9.278964 14.58123 9.278965 23.197411s-3.313916 16.569579-9.278965 23.197411c-5.965049 5.965049-13.255663 9.941748-21.871844 9.941748z m64.95275 176.300324H258.194611c-8.616181 0-16.569579-3.976699-21.871845-9.941748-5.965049-5.965049-9.278964-14.58123-9.278964-23.197411s3.313916-17.232362 9.278964-23.197411 13.255663-9.941748 21.871845-9.941748h427.495145c8.616181 0 16.569579 3.976699 21.871845 9.941748 5.965049 5.965049 9.278964 14.58123 9.278964 23.197411s-3.313916 17.232362-9.278964 23.197411c-5.302265 5.965049-13.255663 9.941748-21.871845 9.941748z m-27.836893-534.203237H365.565485c-27.17411 0-51.034304-10.604531-68.266667-27.17411-17.232362-17.232362-27.836893-40.429773-27.836893-66.9411 0-21.871845 7.290615-41.75534 20.546278-57.662136 11.930097-14.58123 29.16246-25.848544 48.383171-31.813592 5.965049-18.557929 17.232362-34.464725 33.139159-45.732039 16.569579-11.930097 37.115858-19.220712 58.987702-19.220712h162.381877c22.534628 0 43.080906 7.290615 59.650486 19.220712 15.244013 11.267314 27.17411 27.17411 32.476375 45.732039 19.883495 5.302265 36.453074 16.569579 48.383172 31.150809 13.255663 15.906796 20.546278 36.453074 20.546278 58.324919 0 25.848544-10.604531 49.708738-27.836893 66.278317s-41.092557 27.17411-68.266667 27.17411zM430.518235 62.301618c-9.941748 0-18.557929 3.313916-24.522977 9.278965-5.965049 5.302265-9.278964 13.255663-9.278964 21.871844s-3.313916 16.569579-9.278965 21.871845c-5.965049 5.965049-13.255663 9.278964-21.871844 9.278964-9.941748 0-18.557929 3.313916-24.522978 8.616181-5.302265 5.302265-9.278964 11.930097-9.278964 20.546279s3.313916 15.244013 8.616181 20.546278c5.965049 5.302265 14.58123 8.616181 24.522977 8.616181h292.287379c9.941748 0 18.557929-3.313916 24.522977-8.616181 5.302265-5.302265 9.278964-11.930097 9.278965-20.546278s-3.313916-15.906796-9.278965-21.209062-14.58123-8.616181-24.522977-8.616181c-8.616181 0-16.569579-3.313916-21.871845-9.278964-5.965049-5.302265-9.278964-13.255663-9.278964-21.871845s-3.313916-15.906796-9.278964-21.209061-14.58123-8.616181-24.522978-8.616182H429.855452z" p-id="1511"></path><path d="M836.804319 1024H186.614028c-34.464725 0-64.952751-13.918447-87.487378-36.453074s-36.453074-53.685437-36.453075-87.487379V249.869256c0-34.464725 13.918447-64.952751 36.453075-87.487379s53.685437-36.453074 87.487378-36.453074h113.998706c8.616181 0 16.569579 3.313916 21.871844 9.278964 5.965049 5.965049 9.278964 13.255663 9.278965 21.871845s-3.313916 16.569579-9.278965 21.871844c-5.965049 5.965049-13.255663 9.278964-21.871844 9.278965H186.614028c-17.232362 0-32.476375 6.627832-43.743689 17.895145s-17.895146 26.511327-17.895146 43.74369v650.190291c0 17.232362 6.627832 32.476375 17.895146 43.743689s26.511327 17.895146 43.743689 17.895146h650.190291c17.232362 0 32.476375-6.627832 43.74369-17.895146s17.895146-26.511327 17.895145-43.743689V249.869256c0-17.232362-6.627832-32.476375-17.895145-43.74369s-26.511327-17.895146-43.74369-17.895145H722.805614c-8.616181 0-16.569579-3.313916-21.871845-9.278965-5.965049-5.965049-9.278964-13.255663-9.278964-21.871844s3.313916-16.569579 9.278964-21.871845c5.965049-5.965049 13.255663-9.278964 21.871845-9.278964h113.998705c34.464725 0 64.952751 13.918447 87.487379 36.453074s36.453074 53.685437 36.453075 87.487379v650.190291c0 33.801942-13.918447 64.952751-36.453075 87.487379s-53.685437 36.453074-87.487379 36.453074z" p-id="1512"></path></svg>分类            </a>
        </li>
                <li>
            <a href="http://www.su1018.cn/">
                <svg t="1583505519980" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="969" width="200" height="200"><path d="M955.733333 136.533333H68.266667c-18.773333 0-34.133333 15.36-34.133334 34.133334v682.666666c0 18.773333 15.36 34.133333 34.133334 34.133334h887.466666c18.773333 0 34.133333-15.36 34.133334-34.133334V170.666667c0-18.773333-15.36-34.133333-34.133334-34.133334z m-34.133333 682.666667H102.4v-173.738667c8.533333 0.682667 17.408-1.706667 24.917333-7.850666l177.834667-147.797334 262.144 262.144c6.826667 6.826667 15.36 9.898667 24.234667 9.898667s17.408-3.413333 24.234666-9.898667a33.9968 33.9968 0 0 0 0-48.128l-15.36-15.36 102.741334-102.741333 218.453333 213.674667V819.2z m0-115.370667l-194.901333-190.464c-13.312-12.970667-34.816-12.970667-48.128 0.341334l-126.634667 126.634666-220.501333-220.501333a34.133333 34.133333 0 0 0-46.08-2.048L102.4 569.344V204.8h819.2v499.029333zM750.933333 443.733333c37.546667 0 68.266667-30.72 68.266667-68.266666s-30.72-68.266667-68.266667-68.266667-68.266667 30.72-68.266666 68.266667 30.72 68.266667 68.266666 68.266666z" p-id="970"></path></svg>相册            </a>
        </li>
		        <li>
            <a href="http://www.su1018.cn/">
                <svg t="1583506455394" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="903" width="200" height="200"><path d="M145.886908 983.279066a39.343543 39.343543 0 0 1-78.477812 0 221.987572 221.987572 0 0 1 69.740616-164.28022c56.294751-53.835779 134.981837-77.536079 181.806932-81.721562a40.651507 40.651507 0 0 0 23.7003-10.463709 27.938101 27.938101 0 0 0 7.272277-12.974998c-36.622979-30.344754-54.097372-72.199587-68.014104-107.61924a248.303799 248.303799 0 0 0-16.741934-35.995157l-0.837096-0.261593v-0.313911h-0.313912a211.105316 211.105316 0 0 1-51.586082-75.914204c-12.242539-32.071266-15.329333-67.490919 3.086794-99.823777A304.180001 304.180001 0 0 1 200.193555 298.533993a380.669709 380.669709 0 0 1 19.462497-125.5645l1.726512-3.348386c18.939312-55.509973 51.324489-96.213798 92.5515-123.78567C358.038595 15.543002 412.711471 1.887862 474.028802 0.318306a421.425853 421.425853 0 0 1 84.546763 5.231854c34.79183 6.121269 68.014104 19.514816 87.842831 47.662192 41.227011-3.609979 77.222167 19.253223 105.369543 52.73709 34.582556 40.128321 59.433863 98.725088 64.718036 133.307644a262.95299 262.95299 0 0 1 0.575504 80.884465 462.914456 462.914456 0 0 1-14.544554 69.165112c21.241328 33.483867 18.416127 70.786987 6.173588 103.747668a209.274167 209.274167 0 0 1-51.899994 76.123478l-0.575504 0.523186-0.523185 0.575504v0.313911c-4.185483 3.871572-10.463708 18.677719-17.317437 35.681245-13.655139 35.15806-30.083161 76.123478-66.078319 105.997366a28.408968 28.408968 0 0 0 7.53387 14.492236 40.965418 40.965418 0 0 0 23.7003 10.463708c46.615821 4.185483 125.19827 27.885783 181.545339 81.721562a222.667713 222.667713 0 0 1 69.740616 164.541814 39.081951 39.081951 0 1 1-78.111582 0 144.765405 144.765405 0 0 0-45.987998-107.409966 233.968518 233.968518 0 0 0-134.144741-60.218642 118.972364 118.972364 0 0 1-72.513499-33.483866c-21.189009-20.613505-51.324489-98.411177-11.980946-123.262485 27.571871-16.480341 41.854833-51.847675 53.521868-81.721562 10.882257-26.473182 19.828727-49.336385 37.66935-65.555132v0.575504-0.575504a123.890307 123.890307 0 0 0 31.391125-45.726406c5.598084-14.492236 6.749092-28.984472-2.720564-39.029632a51.324489 51.324489 0 0 1-9.155745-46.301909 376.6935 376.6935 0 0 0 15.695563-70.263802 203.41449 203.41449 0 0 0-0.313912-59.695456c-3.348387-23.438707-21.189009-64.142532-46.563502-93.702508-13.393547-15.695562-27.885783-27.362597-40.128321-25.060581a70.159164 70.159164 0 0 1-38.558765-6.173588A73.245958 73.245958 0 0 1 585.362658 102.548736l-2.302016-2.825201c-5.807358-8.894152-20.927417-14.492236-38.454128-17.526711A345.302375 345.302375 0 0 0 475.493721 79.11003c-46.563502 0.575504-87.005735 10.04516-118.501497 31.809673-27.362597 18.154534-48.551607 45.726405-62.206746 84.494445l-1.098689 3.034475a302.715082 302.715082 0 0 0-15.695563 98.777407 235.433437 235.433437 0 0 0 15.06774 82.558659 35.942838 35.942838 0 0 1 4.185483 25.636085c-4.185483 25.636085-24.798989 26.787093-12.55645 60.218641a137.911676 137.911676 0 0 0 30.920259 45.20322l1.151007 1.674194h0.575504c17.003526 15.695562 26.159271 38.454128 36.62298 64.404124 12.294857 29.873887 26.787093 65.816725 54.097372 82.87257a37.826306 37.826306 0 0 1 20.927416 34.582556c0 33.431548-5.598084 62.41602-30.710984 87.528921a117.455126 117.455126 0 0 1-73.245958 33.483866 231.771139 231.771139 0 0 0-133.203007 60.218642A143.823671 143.823671 0 0 0 145.886908 983.279066z" p-id="904"></path></svg>登陆            </a>
        </li>
                    </ul>
</aside>

CSS代码

.mobile_btn {
	display:none
}
@media only screen and (max-width:1200px) {
.mobile_btn {
	display:block;
	position:fixed;
	z-index:98;
	bottom:0;
	right:0;
	left:0;
	text-align:center;
	background-color:#fff;
	border-top:1px #eee solid;
	padding:8px 0 4px
}
.mobile_btn ul {
	margin-right:0;
	display:-moz-flex;
	display:-ms-flex;
	display:-o-flex;
	display:flex;
	justify-content:center
}
.mobile_btn ul li {
	min-width:20%;
	padding:0
}
.mobile_btn ul li:last-child {
	border-right:none
}
.mobile_btn ul li.wechat a svg {
	width:17px;
	height:17px
}
.mobile_btn ul li a {
	font-size:12px;
	display:block
}
.mobile_btn ul li a svg {
	width:14px;
	height:14px;
	display:block;
	margin:auto
}
.mobile_btn ul li a:hover svg {
	fill:#004FCB
}
.mobile_btn ul li a.cart {
	position:relative
}
.mobile_btn ul li a.cart span.cart-contents {
	font-size:10px;
	position:absolute;
	top:-4px;
	left:50%;
	margin-left:4px;
	width:14px;
	height:14px;
	line-height:14px;
	display:block;
	color:#fff;
	background-color:#232323;
	border-radius:100%
}
}
最新回复 (0)
全部楼主
    • ZBlogger技术交流中心
      2
          
返回