0

http://rackspace.comにあるようなメガメニューを作成しようとしています。すでに尋ねられたこれに関する他のいくつかの質問で与えられたチュートリアルを試しましたが、そのうちの1つは多くの画像を使用し、そのうちの1つはリンク先のjQueryのバージョンでは機能しませんでした。これをすべてCSSのままにしておきたいのですが、必要に応じてJavaScriptを使用できます。

複雑なメガメニューの作り方がわかりませんが、シンプルなドロップダウンだけです。誰かが私にこのためのコードを提供してくれたら、私はとても幸せです。私は今CSSを学んでおり、これによって私の知識も研ぎ澄ますことができると思います。

ありがとう、

スコット

4

5 に答える 5

2

これは、グーグルですばやく検索した非常に見栄えの良いソリューションです。自分で試したことはありませんが、有望に見えます：http: //net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

于 2012-07-28T01:41:07.893 に答える
1

あなたの質問は一般的すぎます。ここで記述できる単純なHTMLおよびCSSコードでは、達成しようとしていることは起こりません。

したがって、このjQueryプラグインとCSSフレームワークに興味があるかもしれません： https ：//myflashlabs.github.io/24component-bars/

レスポンシブなメガメニュー、ヘッダー、サイドバー、フッターを作成し、多くの機能を手間をかけずにすばやく簡単に作成できます...まさにあなたが望むものです:)

すでに解決策がある場合は、最初からすべて自分でコーディングする必要はありません。

于 2017-05-20T16:59:31.303 に答える
0

あなたがする必要があることの非常に速いサンプル：

http://jsfiddle.net/KqZd4/

私はこれがそれらのように見えないことを知っています、しかしそれは本当にあなたが必要とするすべての機能です。ドロップダウンにあるものを展開するだけです

于 2012-07-28T01:41:42.617 に答える
0 
<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>

必要なものを追加

その後、シンプルなスタイル

#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;
}

何か問題がある場合は、ここに完全なチュートリアルがあります http://talkerscode.com/webtricks/mega-dropdown-menu-like-ecommerce-using-css.php

于 2016-02-27T18:02:43.060 に答える
0

これを試して 

@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>

参照：メガメニューを作成する方法

于 2019-10-28T16:09:55.003 に答える