Comment rendre mon menu déroulant plus convivial pour les appareils mobiles?

J'utilise le code HTML et CSS suivant pour les périphériques avec une largeur maximale de 480px.Comment rendre mon menu déroulant plus convivial pour les appareils mobiles?

Comment puis-je:

Ajouter le mot "Menu" avant que les liens?
Affichage uniquement "Menu"?
Cliquez sur "Menu" pour afficher les liens, puis les sous-liens.
Faire "Menu", liens et sous-liens 100% de la largeur de l'appareil?

Veuillez noter, mes connaissances de conception de sites Web sont limitées à HTML de base et CSS. Et c'est la première fois que je conçois un site web.

Toute aide ou conseil serait grandement apprécié.

#menu { 
 
    \t position: relative; 
 
    \t top: 0; 
 
    \t margin: 0; 
 
    \t padding: 0; 
 
    \t width: 100%; 
 
    \t height: 3rem; 
 
    \t font-size: 0.8rem; 
 
    \t z-index: 999; 
 
} 
 

 
#menu ul { 
 
    \t position: absolute; 
 
    \t margin: 0; 
 
    \t padding: 0; 
 
    \t height: 100%; 
 
    \t width: 100%; 
 
\t list-style-type: none; 
 
\t background-color: #0000ff; 
 
\t color: #ffffff; 
 
} 
 

 
#menu ul > li { 
 
\t display: block; 
 
\t float: left; 
 
\t height: auto; 
 
\t width: 20%; 
 
\t overflow: hidden; 
 
} 
 

 
#menu li > a { 
 
\t display: block; 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t line-height: 3rem; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t background-color: #0000ff; 
 
\t color: #ffffff; 
 
} 
 

 
#menu li > span { 
 
\t display: block; 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t line-height: 3rem; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t background-color: #0000ff; 
 
\t color: #ffffff; 
 
} 
 

 
#menu ul ul { 
 
\t display: none; 
 
\t position: static; 
 
\t height: auto; 
 
\t width: 100%; 
 
\t margin: 0; 
 
} 
 

 
#menu ul ul li { 
 
\t position: relative; 
 
\t float: none; 
 
\t display: block; 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 

 
#menu ul ul li > a { 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t text-align: center; 
 
} 
 

 
#menu li:hover > a { 
 
\t color: #0000ff; 
 
\t background-color: #ffffff; 
 
} 
 

 
#menu li:hover > span { 
 
\t color: #0000ff; 
 
\t background-color: #ffffff; 
 
} 
 

 
#menu li:hover > ul { 
 
\t display: block; 
 
}

<nav id="menu"> 
 

 
    <ul> 
 

 
     <li><a href="index.html">HOME</a></li> 
 

 
     <li><span>ABOUT</span> 
 
      <ul> 
 
       <li><a href="about/history.html">History</a></li> 
 
       <li><a href="about/champions.html">Champions</a></li> 
 
       <li><a href="about/presidents.html">Presidents</a></li> 
 
       <li><a href="about/committee.html">Committee</a></li> 
 
       <li><a href="about/rules.html">Rules</a></li> 
 
      </ul> 
 
     </li> 
 
    
 
     <li><span>BOOK</span> 
 
      <ul> 
 
       <li><a href="book/functions.html">Functions</a></li> 
 
       <li><a href="book/suite.html">Suite</a></li> 
 
       <li><a href="book/lounge.html">Lounge</a></li> 
 
       <li><a href="book/bar.html">Bar</a></li> 
 
      </ul> 
 
     </li> 
 
    
 
     <li><span>COMPS</span> 
 
      <ul> 
 
       <li><a href="comps/fixtures.html">Fixtures</a></li> 
 
       <li><a href="comps/gents.html">Gents</a></li> 
 
       <li><a href="comps/ladies.html">Ladies</a></li> 
 
       <li><a href="comps/winners.html">Winners</a></li> 
 
      </ul> 
 
     </li> 
 
    
 
     <li><span>CONTACT</span> 
 
      <ul> 
 
       <li><a href="contact/details.html">Details</a></li> 
 
       <li><a href="membership/join.html">Join</a></li> 
 
       <li><a href="contact/map.html">Map</a></li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
    
 
</nav>

Source

2017-09-29 Peter Alexander

_ « S'il vous plaît noter, ma connaissance de la conception web est limitée au format HTML et CSS de base. Et c'est la première fois que je conçois un site web. "_ - Cela ne veut pas dire que vous n'avez plus à faire vos propres recherches de base et nous montrer une tentative. – CBroe

Merci d'avoir pris le temps de répondre, même si votre commentaire était loin d'être utile. Certes, mes recherches peuvent être «basiques» et j'aurais peut-être dû montrer «une tentative». Mais depuis que je me suis intéressé au design web il y a plus d'un mois, j'ai adopté la devise de Boy Scout "Je ferai de mon mieux". Je vous souhaite bonne chance dans le futur. Peter –

S'il vous plaît vérifier l'exemple suivant

/********** Start RESET ********** 
 
\t AUTHOR: Osvaldas Valutis, www.osvaldas.info 
 
*/ 
 
* { 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
*behavior: url('/theme/js/boxsizing.htc'); 
 
\t -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
 
\t -webkit-overflow-scrolling: touch; 
 
} 
 
html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sup, sub, tt, var, b, u, i, center, ul, ol, li, dl, dt, dd, table, tr, th, td, thead, tbody, tfoot, caption, form, fieldset, legend, input, textarea, select, label, applet, object, iframe, audio, video, canvas, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { 
 
\t font-size: 100%; 
 
\t font-family: inherit; 
 
\t font-weight: inherit; 
 
\t font-style: inherit; 
 
\t line-height: inherit; 
 
\t vertical-align: baseline; 
 
\t border: 0; 
 
\t outline: 0; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 
html { 
 
\t font-size: 100%; 
 
\t -webkit-text-size-adjust: 100%; 
 
\t -moz-text-size-adjust: 100%; 
 
\t -ms-text-size-adjust: 100%; 
 
\t -o-text-size-adjust: 100%; 
 
\t text-size-adjust: 100%; 
 
} 
 
body { 
 
\t font-family: Helvetica, Arial, sans-serif; 
 
\t line-height: 1; 
 
\t color: #000; 
 
\t background-color: #fff; 
 
} 
 
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { 
 
\t display: block; 
 
} 
 
audio, canvas, video { 
 
\t display: inline-block; 
 
*display: inline; 
 
*zoom: 1; 
 
} 
 
audio:not([controls]) { 
 
\t display: none; 
 
} 
 
canvas { 
 
\t -ms-touch-action: double-tap-zoom; 
 
} 
 
[hidden] { 
 
display: none; 
 
} 
 
a { 
 
\t text-decoration: underline; 
 
\t color: #000; 
 
} 
 
a:hover { 
 
\t text-decoration: none; 
 
} 
 
small { 
 
\t font-size: 75%; 
 
} 
 
big { 
 
\t font-size: 125%; 
 
} 
 
em { 
 
\t font-style: italic; 
 
} 
 
strong { 
 
\t font-weight: bold; 
 
} 
 
ins { 
 
\t text-decoration: none; 
 
} 
 
del { 
 
\t text-decoration: line-through; 
 
} 
 
sup, sub { 
 
\t font-size: 75%; 
 
\t line-height: 0; 
 
} 
 
sup { 
 
\t vertical-align: super; 
 
} 
 
sub { 
 
\t vertical-align: sub; 
 
} 
 
pre { 
 
\t display: block; 
 
\t overflow: auto; 
 
} 
 
code { 
 
\t font-family: 'Courier New', Courier, monospace; 
 
} 
 
ul, ol { 
 
\t list-style: none; 
 
} 
 
table { 
 
\t table-layout: auto; 
 
\t border-collapse: separate; 
 
\t border-spacing: 0; 
 
\t empty-cells: hide; 
 
} 
 
img { 
 
\t vertical-align: middle; 
 
\t -ms-interpolation-mode: bicubic; 
 
} 
 
svg:not(:root) { 
 
\t overflow: hidden; 
 
} 
 
blockquote, q { 
 
\t quotes: none; 
 
} 
 
blockquote:before, blockquote:after, q:before, q:after { 
 
\t content: ''; 
 
\t content: none; 
 
} 
 
input, textarea { 
 
\t -webkit-appearance: none; 
 
} 
 
button, input, select, textarea { 
 
\t vertical-align: baseline; 
 
*vertical-align: middle; 
 
\t -webkit-border-radius: 0; 
 
} 
 
button, input { 
 
\t line-height: normal; 
 
*overflow: visible; 
 
} 
 
table button, table input { 
 
*overflow: auto; 
 
} 
 
button, input[type='button'], input[type='reset'], input[type='submit'] { 
 
\t cursor: pointer; 
 
\t -webkit-appearance: button; 
 
} 
 
textarea { 
 
\t overflow: auto; 
 
\t vertical-align: top; 
 
} 
 
input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-results-button, input[type='search']::-webkit-search-results-decoration { 
 
display: none; 
 
} 
 
input[type='search'] { 
 
\t -webkit-appearance: textfield; 
 
} 
 
input[type='radio'] { 
 
\t -webkit-appearance: radio; 
 
} 
 
input[type='checkbox'] { 
 
\t -webkit-appearance: checkbox; 
 
} 
 
input::-ms-clear { 
 
display: none; 
 
} 
 
input[type='password']::-ms-reveal { 
 
display: none; 
 
} 
 
.clearfix:after { 
 
\t visibility: hidden; 
 
\t display: block; 
 
\t font-size: 0; 
 
\t content: " "; 
 
\t clear: both; 
 
\t height: 0; 
 
} 
 
* html .clearfix { 
 
\t zoom: 1; 
 
} 
 
*:first-child+html .clearfix { 
 
\t zoom: 1; 
 
} 
 
.cleaner { 
 
\t height: 0; 
 
\t line-height: 0; 
 
\t clear: both; 
 
} 
 

 
/********** End RESET **********/ 
 

 

 

 
html { 
 
\t font-size: 100%; 
 
} 
 
body { 
 
\t font-family: 'Noticia Text', serif; 
 
\t font-weight: 400; 
 
\t -webkit-font-smoothing: antialiased; 
 
\t background-color: #f7efeb; 
 
\t padding: 1.25em; /* 20 */ 
 
} 
 
body, a, a:hover { 
 
\t color: #111; 
 
} 
 
a { 
 
\t -webkit-transition: color .3s ease; 
 
\t -moz-transition: color .3s ease; 
 
\t -ms-transition: color .3s ease; 
 
\t -o-transition: color .3s ease; 
 
\t transition: color .3s ease; 
 
} 
 
a, a:hover { 
 
\t text-decoration: none; 
 
} 
 
#nav { 
 
\t width: 60em; /* 1000 */ 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t font-weight: 400; 
 
\t position: absolute; 
 
\t top: 25%; 
 
\t left: 50%; 
 
\t margin-left: -30em; /* 30 480 */ 
 
} 
 
#nav > a { 
 
\t display: none; 
 
} 
 
#nav li { 
 
\t position: relative; 
 
} 
 
#nav li a { 
 
\t color: #fff; 
 
\t display: block; 
 
} 
 
#nav li a:active { 
 
\t background-color: #c00 !important; 
 
} 
 
#nav span:after { 
 
\t width: 0; 
 
\t height: 0; 
 
\t border: 0.313em solid transparent; /* 5 */ 
 
\t border-bottom: none; 
 
\t border-top-color: #efa585; 
 
\t content: ''; 
 
\t vertical-align: middle; 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t right: -0.313em; /* 5 */ 
 
} 
 
/* first level */ 
 

 
\t \t \t #nav > ul { 
 
\t height: 3.75em; /* 60 */ 
 
\t background-color: #e15a1f; 
 
} 
 
#nav > ul > li { 
 
\t width: 25%; 
 
\t height: 100%; 
 
\t float: left; 
 
} 
 
#nav > ul > li > a { 
 
\t height: 100%; 
 
\t font-size: 1.5em; /* 24 */ 
 
\t line-height: 2.5em; /* 60 (24) */ 
 
\t text-align: center; 
 
} 
 
#nav > ul > li:not(:last-child) > a { 
 
\t border-right: 1px solid #cc470d; 
 
} 
 
#nav > ul > li:hover > a, #nav > ul:not(:hover) > li.active > a { 
 
\t background-color: #cc470d; 
 
} 
 
/* second level */ 
 

 
\t \t \t \t #nav li ul { 
 
\t background-color: #cc470d; 
 
\t display: none; 
 
\t position: absolute; 
 
\t top: 100%; 
 
} 
 
#nav li:hover ul { 
 
\t display: block; 
 
\t left: 0; 
 
\t right: 0; 
 
} 
 
#nav li:not(:first-child):hover ul { 
 
\t left: -1px; 
 
} 
 
#nav li ul a { 
 
\t font-size: 1.25em; /* 20 */ 
 
\t border-top: 1px solid #e15a1f; 
 
\t padding: 0.75em; /* 15 (20) */ 
 
} 
 
#nav li ul li a:hover, #nav li ul:not(:hover) li.active a { 
 
\t background-color: #e15a1f; 
 
} 
 
@media only screen and (max-width: 62.5em) /* 1000 */ { 
 
#nav { 
 
\t width: 100%; 
 
\t position: static; 
 
\t margin: 0; 
 
} 
 
} 
 
@media only screen and (max-width: 40em) /* 640 */ { 
 
html { 
 
\t font-size: 75%; /* 12 */ 
 
} 
 
#nav { 
 
\t position: relative; 
 
\t top: auto; 
 
\t left: auto; 
 
} 
 
#nav > a { 
 
\t width: 3.125em; /* 50 */ 
 
\t height: 3.125em; /* 50 */ 
 
\t text-align: left; 
 
\t text-indent: -9999px; 
 
\t background-color: #e15a1f; 
 
\t position: relative; 
 
} 
 
#nav > a:before, #nav > a:after { 
 
\t position: absolute; 
 
\t border: 2px solid #fff; 
 
\t top: 35%; 
 
\t left: 25%; 
 
\t right: 25%; 
 
\t content: ''; 
 
} 
 
#nav > a:after { 
 
\t top: 60%; 
 
} 
 
#nav:not(:target) > a:first-of-type, #nav:target > a:last-of-type { 
 
\t display: block; 
 
} 
 
/* first level */ 
 

 
\t \t \t #nav > ul { 
 
\t height: auto; 
 
\t display: none; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t right: 0; 
 
} 
 
#nav:target > ul { 
 
\t display: block; 
 
} 
 
#nav > ul > li { 
 
\t width: 100%; 
 
\t float: none; 
 
} 
 
#nav > ul > li > a { 
 
\t height: auto; 
 
\t text-align: left; 
 
\t padding: 0 0.833em; /* 20 (24) */ 
 
} 
 
#nav > ul > li:not(:last-child) > a { 
 
\t border-right: none; 
 
\t border-bottom: 1px solid #cc470d; 
 
} 
 
/* second level */ 
 

 
\t \t \t \t #nav li ul { 
 
\t position: static; 
 
\t padding: 1.25em; /* 20 */ 
 
\t padding-top: 0; 
 
} 
 
}

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 
<meta name="viewport" content="width=device-width,initial-scale=1" /> 
 

 

 

 
<nav id="nav" role="navigation"> <a href="#nav" title="Show navigation">Show navigation</a> <a href="#" title="Hide navigation">Hide navigation</a> 
 
     <ul class="clearfix"> 
 
    <li><a href="">Home</a></li> 
 
    <li> <a href=""><span>Blog</span></a> 
 
      <ul> 
 
     <li><a href="">Design</a></li> 
 
     <li><a href="">HTML</a></li> 
 
     <li><a href="">CSS</a></li> 
 
     <li><a href="">JavaScript</a></li> 
 
     </ul> 
 
     </li> 
 
    <li> <a href=""><span>Work</span></a> 
 
      <ul> 
 
     <li><a href="">Web Design</a></li> 
 
     <li><a href="">Typography</a></li> 
 
     <li><a href="">Front-End</a></li> 
 
     </ul> 
 
     </li> 
 
    <li><a href="">About</a></li> 
 
    </ul> 
 
</nav>

Source

2017-09-29 10:09:08

Comment rendre mon menu déroulant plus convivial pour les appareils mobiles?

Répondre

Questions connexes