• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

MEGA MENU No 7

MEGA MENU No 7
MEGA MENU No 7
Το παρακάτω mega menu έχει την δυνατότητα εώς και 4 στηλες συνδέσμων. Τα χρώματα αλλάζουν εάν αλλάξετε τον εξαψήφιο κωδικό χρώματος που βρίσκεται μετά το σύμβολο της δίεσης #. Τα υπομενού που έχουν πολλές στήλες να τα βάζετε στην αρχή του μενού γιατί ανοιγουν προς τα δεξιά. Δείτε παρακάτω σε λειτουργία το mega menu 7.


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<title>MEGA MENU-7</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
</head>  
<body>
<style>
/* #Resets –––––––––––––––––––––––––––––––––––––––––––––––––– */
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
/* #Universal and Default Styles –––––––––––––––––––––––––––– */
body {color:#fff;font:14px arial;line-height: 1;margin: 0;padding: 0;text-align:left;}
a {text-decoration: none;}
.container {margin:auto;width:auto;}
.ul-reset {padding-left: 0;margin-top: 0;margin-bottom: 0;list-style: none;}
/* #Navigation Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {background: #400030;font-size:0;position: relative;}
nav > ul > li {display: inline-block;font-size: 14px;padding:0 10px;position: relative;}
nav > ul > li:first-child {padding-left:5px;}
nav > ul > li:last-child {padding-right: 0;}
nav > ul > li > a {color: #fff;display: block;position: relative;padding:10px 0;border-bottom: 3px solid transparent;}
nav > ul > li:hover > a {background:#661111;color:#ffff00;border-bottom: 3px solid #00FF00;}
/* #Mega Menu Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */
.mega-menu4 {background: #333;color:#FFF;display: none;left: 0;position: absolute;text-align: left;width:1040px;}
.mega-menu3 {background: #333;color:#FFF;display: none;left: 0;position: absolute;text-align: left;width:780px;}
.mega-menu2 {background: #333;color:#FFF;display: none;left: 0;position: absolute;text-align: left;width:520px;}
.mega-menu1 {background: #333;color:#FFF;display: none;left: 0;position: absolute;text-align: left;width:260px;}
.mega-menu4 h3 {color: #FFFF00;}
.mega-menu3 h3 {color: #FFFF00;}
.mega-menu2 h3 {color: #FFFF00;}
.mega-menu1 h3 {color: #FFFF00;}
.mega-menu4 ul {float:left;margin-bottom:10px;margin-right:10px;padding-left:10px;width:250px;}
.mega-menu4 ul:last-child {margin-right: 0;}
.mega-menu4 a {border-bottom: 1px solid #00FF00;color:#33FFFF;display: block;padding: 10px 0;}
.mega-menu4 a:hover {color: #FFFF00;}
.mega-menu3 ul {float:left;margin-bottom:10px;margin-right:10px;padding-left:10px;width:250px;}
.mega-menu3 ul:last-child {margin-right: 0;}
.mega-menu3 a {border-bottom: 1px solid #00FF00;color:#33FFFF;display: block;padding: 10px 0;}
.mega-menu3 a:hover {color: #FFFF00;}
.mega-menu2 ul {float:left;margin-bottom:10px;margin-right:10px;padding-left:10px;width:250px;}
.mega-menu2 ul:last-child {margin-right: 0;}
.mega-menu2 a {border-bottom: 1px solid #00FF00;color:#33FFFF;display: block;padding: 10px 0;}
.mega-menu2 a:hover {color: #FFFF00;}
.mega-menu1 ul {float:left;margin-bottom:10px;margin-right:10px;padding-left:10px;width:250px;}
.mega-menu1 ul:last-child {margin-right: 0;}
.mega-menu1 a {border-bottom: 1px solid #00FF00;color:#33FFFF;display: block;padding: 10px 0;}
.mega-menu1 a:hover {color: #FFFF00;}
/* #Droppable Class Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */
.droppable {position: relative;}
.droppable > a:after {content: "▼";font:12px arial;padding-left:6px;position:relative;top:-1px;}
.droppable:hover .mega-menu4 {display:block;}
.droppable:hover .mega-menu3 {display:block;}
.droppable:hover .mega-menu2 {display:block;}
.droppable:hover .mega-menu1 {display:block;}
/* #Browser Clearfix –––––––––––––––––––––––––––––––––––––––––––––––––– */
.cf:before, .cf:after {content: " "; /* 1 */ display: table; /* 2 */}
.cf:after {clear: both;}
</style>
<section class="container"> 
</section><!-- .container -->
<nav>
  <ul class="container ul-reset">
    <li><a href='#'>HOME</a></li>
    <li class='droppable'>
      <a href='#'>4-COLUMNS</a>
      <div class='mega-menu4'>
       <div class="container cf">
          <ul class="ul-reset">
            <h3>Heading 1</h3>
            <li><a href='#'>PAGE-1</a></li>
            <li><a href='#'>PAGE-2</a></li>
            <li><a href='#'>PAGE-3</a></li>
            <li><a href='#'>PAGE-4</a></li>
            <li><a href='#'>PAGE-5</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 2</h3>
            <li><a href='#'>PAGE-1</a></li>
            <li><a href='#'>PAGE-2</a></li>
            <li><a href='#'>PAGE-3</a></li>
            <li><a href='#'>PAGE-4</a></li>
            <li><a href='#'>PAGE-5</a></li>
          </ul><!-- .ul-reset -->
     <ul class="ul-reset">
            <h3>Heading 3</h3>
            <li><a href='#'>PAGE-1</a></li>
            <li><a href='#'>PAGE-2</a></li>
            <li><a href='#'>PAGE-3</a></li>
            <li><a href='#'>PAGE-4</a></li>
            <li><a href='#'>PAGE-5</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 4</h3>
            <li><a href='#'>PAGE-1</a></li>
            <li><a href='#'>PAGE-2</a></li>
            <li><a href='#'>PAGE-3</a></li>
            <li><a href='#'>PAGE-4</a></li>
            <li><a href='#'>PAGE-5</a></li>
          </ul><!-- .ul-reset -->         
        </div><!-- .container -->
      </div><!-- .mega-menu -->
    </li><!-- .droppable -->
    <li class='droppable'>
      <a href='#'>3-COLUMNS</a>
      <div class='mega-menu3'>
        <div class="container cf">
          <ul class="ul-reset">
            <h3>Heading 1</h3>
            <li><a href='#'>PAGE-1</a></li>
            <li><a href='#'>PAGE-2</a></li>
            <li><a href='#'>PAGE-3</a></li>
            <li><a href='#'>PAGE-4</a></li>
            <li><a href='#'>PAGE-5</a></li>
          </ul><!-- .ul-reset -->
          <ul class="ul-reset">
            <h3>Heading 2</h3>
            <li><a href='#'>PAGE-1</a></li>
            <li><a href='#'>PAGE-2</a></li>
            <li><a href='#'>PAGE-3</a></li>
            <li><a href='#'>PAGE-4</a></li>
            <li><a href='#'>PAGE-5</a></li>
          </ul><!-- .ul-reset -->         
          <ul class="ul-reset">
            <h3>Heading 3</h3>
            <li><a href='#'>PAGE-1</a></li>
            <li><a href='#'>PAGE-2</a></li>
            <li><a href='#'>PAGE-3</a></li>
            <li><a href='#'>PAGE-4</a></li>
            <li><a href='#'>PAGE-5</a></li>
          </ul><!-- .ul-reset -->
        </div><!-- .container -->
      </div><!-- .mega-menu-->
    </li><!-- .droppable -->
  <li class='droppable'>
      <a href='#'>2-COLUMNS</a>
      <div class='mega-menu2'>
        <div class="container cf">
          <ul class="ul-reset">
            <h3>Heading 1</h3>
            <li><a href='#'>PAGE-1</a></li>
            <li><a href='#'>PAGE-2</a></li>
            <li><a href='#'>PAGE-3</a></li>
            <li><a href='#'>PAGE-4</a></li>
            <li><a href='#'>PAGE-5</a></li>
          </ul><!-- .ul-reset -->                
          <ul class="ul-reset">
            <h3>Heading 2</h3>
            <li><a href='#'>PAGE-1</a></li>
            <li><a href='#'>PAGE-2</a></li>
            <li><a href='#'>PAGE-3</a></li>
            <li><a href='#'>PAGE-4</a></li>
            <li><a href='#'>PAGE-5</a></li>
          </ul><!-- .ul-reset -->
        </div><!-- .container -->
      </div><!-- .mega-menu-->
    </li><!-- .droppable -->   
  <li class='droppable'>
      <a href='#'>1-COLUMN</a>
      <div class='mega-menu1'>
        <div class="container cf">                         
          <ul class="ul-reset">
            <h3>Heading 1</h3>
            <li><a href='#'>PAGE-1</a></li>
            <li><a href='#'>PAGE-2</a></li>
            <li><a href='#'>PAGE-3</a></li>
            <li><a href='#'>PAGE-4</a></li>
            <li><a href='#'>PAGE-5</a></li>
          </ul><!-- .ul-reset -->
        </div><!-- .container -->
      </div><!-- .mega-menu-->
    </li><!-- .droppable -->   
    <li><a href='#'>ABOUT US</a></li>
    <li><a href='#'>CONTACT</a></li>
  </ul><!-- .container .ul-reset -->
</nav>
</body>
</html>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.