1. Responsive navigation Menu
When the viewport is larger than 640px, the navigation bar will appear outside, and when the viewport is less than 768px, the navigation menu needs to be hidden!
The code is as follows:
<!doctype html>The
CSS code is as follows:
body{margin:0;}. nav{Background-color:black; width:100%; Position:relative;}. Nav ul{margin:0; padding:0; width:80%; margin:0 Auto;}. clearfix:after{Display:block; Content: ""; height:0; Clear:both; Visibility:hidden;}. Nav ul li{List-style:none; Float:left;}. Nav ul Li a{color:white; padding:20px 30px; Display:block; Text-decoration:none;}. Nav ul Li a:hover{background-color:red;}. pic{Background:url (logo.jpg) no-repeat; Position:absolute; top:5px; left:5px; width:113px; height:39px;}. btn{Background-color: #333; Text-align:right; Color:white; font-size:20px; padding:10px; Display:none;} @media screen and (max-width:640px) {. Nav ul li{Float:none; Text-align:center; }. Nav ul{width:100%; }. btn{Display:block; }. pic{Position:absolute; left:50%; margin-left:-56px; }}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
