показать и скрыть меню навигации на Ipad

Я работаю над небольшим веб-сайтом для своего учителя, и я должен сделать меню навигации с подменю (я использую: hover). Этот веб-сайт будет использоваться на компьютере и на планшетах или Ipad. Мое меню закончено, но на планшетах я сталкиваюсь со следующей проблемой: мое подменю хорошо показывает, но оно не скрывается, когда я касаюсь в другом месте экрана (кроме логотипа - не знаю почему). Другой студент сказал мне, что нашел решение, но когда он коснулся одной из ссылок в подменю, подменю скрывается, и это не тот результат, который я хочу. Наш учитель сказал нам, что мы абсолютно не должны использовать что-то другое, кроме HTML и CSS (No JS, no JQuery).показать и скрыть меню навигации на Ipad

Вот мой код:

body > header > nav { 
 
    min-width: 768px; 
 
    margin: 0 auto; 
 
    padding-top: 20px; 
 
    font-size: 1.5em; 
 
    text-align: center; 
 
} 
 

 
nav > ul ul { 
 
    position: absolute; 
 
    left: -999em; 
 
    text-align: left; 
 
} 
 

 
nav li { 
 
    width: 150px; 
 
} 
 

 
nav > ul > li { 
 
    display: inline-block; 
 
} 
 

 
nav a { 
 
    display: block; 
 
    text-decoration: none; 
 
} 
 

 
nav > ul > li > a { 
 
    padding: 10px 0; 
 
    color: #44546A; 
 
} 
 

 
nav > ul ul li { 
 
    background-color: #333F50; 
 
    list-style-type: none; 
 
} 
 

 
nav > ul ul li a { 
 
    padding: 10px 0 10px 30px; 
 
} 
 

 
nav > ul ul li a { 
 
    color: #FAFAFA; 
 
    font-size: 0.9em; 
 
} 
 

 
nav > ul ul li:hover { 
 
    background-color: #51647f; 
 
} 
 

 
nav > ul li:hover ul { 
 
    left: auto; 
 
}

<html>  
 
    <body> 
 
     <header> 
 
      <img src="img/logo_def_vect.svg" alt="Logo"/> 
 
      <nav> 
 
       <ul> 
 
        <li> 
 
         <a href="#">Menu1</a> 
 
         <ul> 
 
          <li> 
 
           <a href="#">SubMenu1.1</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li><a href="#">Menu2</a> 
 
         <ul> 
 
          <li> 
 
           <a href="#">SubMenu2.2</a> 
 
          </li> 
 
          <li> 
 
           <a href="#">SubMenu2.3</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
     </header> 
 
    </body> 
 
</html>

источник

2017-02-22 Cedric Beaud

Я нашел это решение: http://stackoverflow.com/questions/714471/jquery-hide-element-when-clicked-anywhere -on-the-page, но есть ли какие-либо, которые не используют Jquery/Javascript? –

Вам нужно сделать страницу отзывчивым. Добавьте это в разделе HEAD,

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>Website Title</title>

источник

2017-02-22 15:14:04 mlegg

К сожалению, это не сработает. Мое подменю по-прежнему хорошо видно на Ipad, но оно не скрывается, когда я касаюсь в другом месте экрана (кроме логотипа) –

показать и скрыть меню навигации на Ipad

ответ

Смежные вопросы