Как сделать переключаемый навигатор в чистом CSS?

Я пытаюсь создать навигационную панель с чистым HTML и CSS, которая не требует JavaScript для открытия и закрытия.Как сделать переключаемый навигатор в чистом CSS?

У меня проблема с открытой навигационной панелью. Когда я устанавливаю display: none или visibility: hidden, чтобы получить желаемую функциональность, гиперссылка больше не работает.

http://codepen.io/anon/pen/dOMYEj

Возможно ли это? Благодаря!

источник

2016-11-17 Faraz

Дисплей: сгибать и положение: исправлен не идут вместе – Geeky

я смог FINA lly создать его. Я действительно надеюсь, что это поможет кому-то.

HTML:

<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="taco.css"> 
    <title>Test Page</title> 
</head> 

<nav> 
    <header><h1>Test Site</h1></header> 
    <div id="navigation"> 
     <button>☰</button> 
     <ul id="links"> 
      <li><a href="#top">Home</a> 
      </li> 
      <li><a href="#about">About</a> 
      </li> 
      <li><a href="#menu">Menu</a> 
      </li> 
      <li><a href="#hours">Hours</a> 
      </li> 
      <li><a href="#directions">Directions</a> 
      </li> 
      <li><a href="#contact">Contact</a> 
      </li> 
     </ul> 
    </div> 
</nav> 

<main> 
    <section id="top"> 
     <h1>Welcome</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt consectetur suscipit in, vitae voluptas, dolorum consequatur sequi animi deserunt maxime quae sint dolorem dolores aliquid totam qui architecto ab beatae. 
     reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam 
     voluptatem. Ad aliquid dolorum excepturi expedita nostrum. 
    </section> 
    <section id="about"> 
     <h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor 
     sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur 
     adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum. 
    </section> 
    <section id="menu"> 
     <h1>Menu</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum magnam quo quia quod eius aliquam adipisci molestias vel, sapiente ex nobis, eligendi a inventore nihil sit aut molestiae voluptatibus culpa. 
    </section> 
    <section id="hours"> 
     <h1>Hours</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam iste consequatur impedit, voluptatum saepe vero harum quod, repudiandae maxime dolorum non. Adipisci, tempore, quisquam! Est dolorem obcaecati distinctio explicabo veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta deserunt adipisci, debitis dolor ex consectetur iusto repellat molestias velit suscipit laudantium enim quae autem eveniet repudiandae sit. Facilis, quis, at. 
     dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur 
     adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum. 
    </section> 
    <section id="directions"> 
     <h1>Directions</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, ipsam, optio reiciendis sit quidem beatae consequatur alias nulla labore! Vel quibusdam neque consequatur est tempora quas omnis placeat ab ex.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, sit amet dolores. Nobis corrupti nihil, officiis maiores eligendi modi quo, minus? Expedita, corrupti ullam nobis cum, quibusdam ipsa quo ex! 
     adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
     Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum. 
    </section> 
    <section id="contact"> 
     <h1>Contact</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati minus ducimus fuga qui dignissimos reiciendis voluptatibus ea iusto dolorem doloribus eius similique impedit, molestiae consequuntur non ratione enim, ullam laboriosam. Lorem ipsum 
     dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur 
     adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum. 
    </section> 
</main> 

</html>

CSS:

* { 
    font-family: sans-serif; 
} 
nav { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    background-color: white; 
    align-items: center; 
    box-sizing: border-box; 
    box-shadow: 0 0 2px rgba(128, 128, 128, 0.5); 
} 
nav div#navigation { 
    height: 5vh; 
    width: 10vw; 
    position: fixed; 
    top: 1vh; 
    padding: 1vw; 
    right: 25vw; 
} 
.icon { 
    display: inline; 
} 
nav header { 
    top: 1vw; 
    left: 1vw; 
    position: fixed; 
} 
nav header > h1 { 
    background-color: rgba(255, 255, 255, .5); 
    font-family: cursive; 
    font-size: 2rem; 
    padding-left: 1vw; 
    color: blue; 
    left: 0; 
} 
nav li { 
    list-style: none; 
    display: inline; 
    font-size: 1.2rem; 
    padding: 1vh; 
    cursor: pointer; 
} 
nav li:focus { 
    color: blue; 
} 
nav a { 
    color: darkgray; 
    text-decoration: none; 
} 
nav a:hover { 
    color: black; 
} 
nav a:active { 
    color: blue; 
} 
nav li:first-child * { 
    color: blue; 
} 
nav ul { 
    width: 50vw; 
} 
nav h1, 
nav ul { 
    font-size: 2rem; 
} 
nav #links { 
    background-color: rgba(255, 255, 255, .9); 
} 
button { 
    display: none; 
} 
input { 
    display: none; 
} 
section { 
    font-size: 2rem; 
    padding: 1vh 5vh 0 5vh; 
} 
section#top { 
    margin-top: 5.5vh; 
} 
section > h1 { 
    margin-top: 8vh; 
    color: blue; 
} 

/* Changed to 9999px so it's always collapsed */ 
@media (max-width: 9999px) { 
    button { 
     font-size: 1.75rem; 
     border: 0; 
     background: white; 
     cursor: pointer; 
     display:block; 
    } 
    button:focus { 
     outline: 0; 
    } 
    nav div#navigation { 
     right: 0; 
    } 
    nav li { 
     display: block; 
     border: solid 1px blue; 
     margin: 0 auto; 
    } 
    #links { 
     display: none; 
     background-color: white; 
    } 
    button:focus + #links, 
    #links:hover { 
     display: block; 
     position: absolute; 
     right: 5vw; 
    } 
    nav { 
     color: blue; 
    } 
    section > h1 { 
     margin-top: 6.25vh; 
     color: blue; 
    } 
    nav header > h1 { 
     margin: 0; 
     padding: 0; 
     font-size: 2rem; 
    } 
}

Demo

источник

2016-11-18 23:55:21 Faraz

Хорошая работа Faraz .. Просто вопрос, даже в вашем решении, когда вы нажимаете на любой из пунктов меню, например, о/часах/направлениях целевой раздел, связанный с пунктом меню, можно увидеть, но th Навигационная панель не закрывается, разве вы не искали этого или вы просто смотрели, когда фокус выходит из барной стойки, он должен закрыться? – Geeky

Спасибо Geeky! Я реорганизовал его так, что, когда вы уходите, он закрывается. Это фактическая функциональность, которую я искал. – Faraz

oh ok ... я был под другим предположением ... в любом случае хорошая работа! – Geeky

при использовании дисплея: гибкое, положения: абсолютные, относительный и фиксированный не ведут себя как expected.check этого link

Modified разметки и CSS немного .please проверить следующий фрагмент

* { 
 
    font-family: sans-serif; 
 
} 
 
nav { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    background-color: white; 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    box-shadow: 0 0 2px rgba(128, 128, 128, 0.5); 
 
} 
 
nav div { 
 
    height: 5vh; 
 
    width: 10vw; 
 
    position: fixed; 
 
    top: 0; 
 
    padding: 3px; 
 
    right: 0; 
 
} 
 
.icon { 
 
    display: inline; 
 
} 
 
nav > h1 { 
 
    font-family: cursive; 
 
    font-size: 1.2rem; 
 
    padding-left: 10px; 
 
    color: blue; 
 
} 
 
nav li { 
 
    list-style: none; 
 
    display: inline; 
 
    font-size: 1.2rem; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
} 
 
nav a { 
 
    color: darkgray; 
 
    text-decoration: none; 
 
} 
 
nav a:hover { 
 
    color: black; 
 
} 
 
nav a:active { 
 
    color: blue; 
 
} 
 
nav li:first-child * { 
 
    color: blue; 
 
} 
 
nav ul { 
 
    width: 50vw; 
 
} 
 
nav h1, 
 
nav ul { 
 
    font-size: 2rem; 
 
} 
 
nav > input { 
 
    display: none; 
 
} 
 
nav > label { 
 
    display: none; 
 
} 
 
input { 
 
    display: none; 
 
} 
 
section { 
 
    font-size: 2rem; 
 
    padding: 1vh 5vh 0 5vh; 
 
} 
 
section#top { 
 
    margin-top: 5.5vh; 
 
} 
 
@media (max-width: 5000px) { 
 
    /* changed to 5000 so it is always collapsed */ 
 
    nav { 
 
    height: 6vh; 
 
    text-align: center; 
 
    justify-content: space-between; 
 
    } 
 
    nav li { 
 
    display: block; 
 
    border: solid 1px blue; 
 
    margin: 0 auto; 
 
    } 
 
    #links { 
 
    visibility: hidden; 
 
    } 
 
    section#top { 
 
    margin-top: 10vh; 
 
    } 
 
    input:checked + nav ul#links { 
 
    visibility: visible; 
 
    position: absolute; 
 
    right: 30px; 
 
    } 
 
    input:not:checked +nav ul#links { 
 
    visibility: hidden; 
 
    } 
 
    nav { 
 
    color: blue; 
 
    } 
 
}

<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" href="taco.css"> 
 
    <title>Test Page</title> 
 
</head> 
 
<input type='checkbox' id='one'> 
 

 
<nav class="toggleable" tabindex="1"> 
 
    <h1>Test Page</h1> 
 
    <div> 
 
    <label for="one">☰</label> 
 
    <ul id="links"> 
 
     <li><a href="#top">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#menu">Menu</a> 
 
     </li> 
 
     <li><a href="#hours">Hours</a> 
 
     </li> 
 
     <li><a href="#directions">Directions</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 

 
<main> 
 
    <section id="top"> 
 
    <h1>Welcome</h1> awefore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia 
 
    reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam 
 
    voluptatem. Ad aliquid dolorum excepturi expedita nostrum. 
 
    </section> 
 
    <section id="about"> 
 
    <h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor 
 
    sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur 
 
    adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum. 
 
    </section> 
 
    <section id="menu"> 
 
    <h1>Menu</h1> Lorem ipsum dolor styktyktyktyking elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, 
 
    consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing 
 
    elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum. 
 
    </section> 
 
    <section id="hours"> 
 
    <h1>Hours</h1> Lorem ipsum dolor sit rtyr657456ydfghfvgyjktyuicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum 
 
    dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur 
 
    adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum. 
 
    </section> 
 
    <section id="directions"> 
 
    <h1>Directions</h1> Lorem ipsuaw4yae4yah34rtaw3789t. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur 
 
    adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
    Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum. 
 
    </section> 
 
    <section id="contact"> 
 
    <h1>Contact</h1> Lorem ipsum dolor 3456345789ru8ghiuretur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum 
 
    dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur 
 
    adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum. 
 
    </section> 
 
</main> 
 

 
</html>

Надеется, что это помогает

источник

2016-11-17 06:38:11 Geeky

Спасибо за обмен! Есть ли способ сделать это с отображением/видимостью, а не с прозрачностью? Поскольку с непрозрачностью меню все еще существует и доступно для кликов. Кроме того, возможно ли программно сделать его более плавным, чтобы во второй раз его щелкнуть, он не отображается, а затем уходит, а переключается правильно? – Faraz

Изменен код ... Я не использовал прозрачность, только с видимостью: скрытый, просто проверьте, что вы хотите – Geeky

Geeky, если вы заметили - теперь щелчок по определенному пункту меню не закрывает меню, поскольку я Мне нравится. Возврат к той же проблеме, которая происходила изначально. Есть ли способ сделать так, чтобы он закрывался при нажатии? – Faraz

Как сделать переключаемый навигатор в чистом CSS?

ответ

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