A criação de um grande Mega Menu com CSS

Question

Eu estou tentando criar um mega-menu como no http://rackspace.com.Eu tentei os tutoriais dado alguns dos outros perguntas sobre este já perguntei, mas um deles usou um monte de imagens, e um deles não funciona com a versão do jQuery que eles vinculadas.Eu gostaria de manter isso tudo CSS, mas se eu devo, eu poderia usar um pouco de JavaScript.

Eu não entendo como fazer mega complexo do menu, mas apenas o simples drop-down.Se alguém poderia me fornecer o código para isso, eu seria muito feliz.Eu estou aprendendo CSS agora e eu acho que isso vai permitir que eu afiar a minha conhecimento bem.

Obrigado,

Scott

Answer 1

Amostra extremamente rápida do que você precisa fazer:

http://jsfiddle.net/kqzd4/

Eu sei que isso não parece nada parecido com aqueles, mas isso é realmente toda a funcionalidade que você precisa.Basta expandir o que está na lista suspensa

Answer 2

Aqui está uma solução muito agradável, uma rápida pesquisa no Google apareceu.Não tentei para mim mesmo, mas parece promissor: http://net.tutsplus.com/tutorials/html-csss-techniques/how-to-build-a-kick-butt-csss3-mega-Menu /

Answer 3

Sua pergunta é muito geral.O que você está tentando conseguir não vai acontecer com um código HTML e CSS simples que podemos escrever aqui.

Então você pode estar interessado neste this jquery plugin e CSS Framework: https://myflashlabs.github.io/24Component-bars/

Isso ajuda você a criar Mega Menu, cabeçalho, barra lateral e rodapé Responsive com lotes funcionalidades rápidas e fáceis, sem qualquer aborrecimento ... é exatamente o que você quer :)

você não precisa codificar você mesmo desde o começo quando já há uma solução lá fora!

Answer 4

<li class="main_list">Electronics
<ul>
<p class="category_header">Buy Any Electronics Item And Get Flat 50% OFF</p>
<ol>
<li>Mobiles</li>
<li>Item1</li>
<li>Item2</li>
</ol>

<ol>
<li>Tablets</li>
<li>Item1</li>
<li>Item2</li>
</ol>

</ul>
</li>

adicionar mais você quer

em seguida, o estilo simples

#main_menu
{
background-color:#1C1C1C;
float:left;
padding:0px;
width:700px;
height:50px;
line-height:50px;
margin-left:140px;
border-radius:5px;
}
#main_menu .main_list
{
color:white;
list-style-type:none;
float:left;
border-left:1px solid #666;
padding-left:27px;
padding-right:27px;

}
#main_menu .main_list:hover
{
color:#2E9AFE;
}
.main_list ul
{
background-color:white;
width:600px;
position:absolute;
left:150px;
width:700px;
padding:0px;
float:left;
padding-bottom:10px;
}
.main_list ul p
{
color:white;
background-color:#2E9AFE;
margin:0px;
text-align:left;
padding-left:10px;
font-size:20px;
font-weight:bold;
}
.main_list ul ol
{
float:left;
padding:0px;
list-style-type:none;
margin-left:30px;
}
.main_list ul ol li
{
line-height:25px;
font-weight:bold;
font-size:16px;
color:#2E9AFE;
}

se você tem qualquer problema de compreensão aqui é um tutorial completo http://talkerscode.com/webtricks/mega-dropdown-menu-like-ecommerce-using-css.php

Answer 5

Tente Isso

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
* {
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  margin: 0;
}

/* Style Navigation bar */
.navbar {
  display: -webkit-flex;
  display: flex;
  background-color: #e3e3e3;
}

.navbar a {
  display: block;
  text-decoration: none;
  color: black;
  padding: 1.1em 1em;
  font-size: 1.1em;
  border-bottom: 3px solid transparent;
  transition: 0.1s;
}

.navbar > a:hover, .dropdown > a:hover {
  border-bottom-color: #FA7D19;
}

/* Style Mega Menu */
.dropdown-content {
  display: none;
  position: absolute;
  width: 90%;
  left: 5%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  overflow: hidden;
}

.dropdown-content .header {
  padding: 16px;
  color: #777;
  background: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that stacks next to each other */
.row {
  display: -webkit-flex;
  display: flex;
}

.column {
  width: 100%;
  padding: 10px;
  background: #f8f8f8;
}

.column a {
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
}

/* Makes the three columns stack on top of each other instead of 
   next to each other (when screen width is 600px or less) */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

<div class="navbar">
  <a href="#">Home</a>
  <div class="dropdown">
    <a href="#">Dropdown <i class="fa fa-caret-down"></i></a>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>   
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div> 
  <a href="#">Pricing</a>
</div>

<div style="padding:10px 15px;">
  <h1>Create a Mega Menu</h1>
  <p>Hover over the "Dropdown" link to see the mega menu.</p>
</div>

Referência:Como Criar um Mega-Menu