Web Analytics Made Easy - StatCounter
Simple Pure CSS Drop Down Menu

14 Νοεμβρίου 2017

Simple Pure CSS Drop Down Menu



Ένα μενού πολύ απλό αλλα ταυτοχρόνως και πολύ κόμσο.

Οι κώδικες του είναι γραμμένη σε html, css, αυτό σημαίνει ακόμα πιο εύκολη η προσαρμογή του.

Code: 


<style>
#primary_nav_wrap
{
margin-top:15px
}

#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
/* foulscode.com */
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}

#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}

#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}

#primary_nav_wrap ul ul li
{
float:none;
width:200px
}

#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}

#primary_nav_wrap ul li:hover > ul
{
display:block
}
</style>
<h1>Simple Pure CSS Drop Down Menu FoulsCode.com</h1>
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="URL">Home</a></li>
  <li><a href="URL">Menu 1</a>
    <ul>
      <li><a href="URL">Sub Menu 1</a></li>
      <li><a href="URL">Sub Menu 2</a></li>
      <li><a href="URL">Sub Menu 3</a></li>
      <li><a href="URL">Sub Menu 4</a>
        <ul>
          <li><a href="URL">Deep Menu 1</a>
            <ul>
              <li><a href="URL">Sub Deep 1</a></li>
              <li><a href="URL">Sub Deep 2</a></li>
              <li><a href="URL">Sub Deep 3</a></li>
                <li><a href="URL">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="URL">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="URL">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="URL">Menu 2</a>
    <ul>
      <li><a href="URL">Sub Menu 1</a></li>
      <li><a href="URL">Sub Menu 2</a></li>
      <li><a href="URL">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="URL">Menu 3</a>
    <ul>
      <li class="dir"><a href="URL">Sub Menu 1</a></li>
      <li class="dir"><a href="URL">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
        <ul>
          <li><a href="URL">Category 1</a></li>
          <li><a href="URL">Category 2</a></li>
          <li><a href="URL">Category 3</a></li>
          <li><a href="URL">Category 4</a></li>
          <li><a href="URL">FoulsCode.com</a></li>
        </ul>
      </li>
      <li><a href="URL">Sub Menu 3</a></li>
      <li><a href="URL">Sub Menu 4</a></li>
      <li><a href="URL">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="URL">Menu 4</a></li>
  <li><a href="URL">Menu 5</a></li>
  <li><a href="URL">Menu 6</a></li>
  <li><a href="URL">Contact Us</a></li>
</ul>
</nav>



Αφού κάνετε αντιγραφή επικόλληση θα πρέπει να προσαρμόσετε εσείς της κατηγοριες που θέλετε.

Αλλάζοντας το κείμενο που θα εμφανίζεται και τον σύνδεσμο που θα ακόλουθη ο επισκέπτης!

Είστε έτοιμη για να κάνετε save!

ΘΑ ΑΚΟΥΛΟΥΘΉΣΟΥΝ ΝΑ ΑΝΕΒΑΊΝΟΥΝ ΚΑΙ ΑΛΛΑ MENU ΓΙΑ ΤΟ ΑΓΑΠΗΜΈΝΟ ΣΑΣ ΙΣΤΌΤΟΠΟ

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

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

Related Posts Plugin for WordPress, Blogger...