Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Sign in to follow this  
Followers 0
Anastasis

Δημιουργώντας menu

By Anastasis, in Css

Recommended Posts

Anastasis    48

Anastasis
Posted

Ας αρχίσουμε από το σκαρί της σελίδας


 

κώδικας:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
</head>

<body>
</body>
</html>



Μέσα στο body θα τοποθετήσουμε το menu που επιθυμούμε με την χρήση τον elements <div>, <ul> & <li>
το οποιο θα είναι αυτής της μορφής:

κώδικας:
<div id="Menu">
   <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
   </ul>
</div>



Έπειτα θα προσθέσουμε ένα Stylesheet με το όνομα Menu.css

κώδικας:
#Menu {
   float: left;
   width: 200px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 0.8em;
}

#Menu ul {
   margin: 0px;
   padding: 0px;
   list-style-type: none;
}

#Menu li {
   margin: 0px;
}

#Menu a {
   display: block;
   padding: 4px 4px 4px 25px;
   border-right: 1px solid #000000;
   border-left: 1px solid #000000;
   border-bottom: 1px solid #000000;
   background-color: #599d7e;
   color: #ffffff;
}

#Menu a:link, #Menu a:visited {
   color: #ffffff;
   background-color: #599d7e;
   text-decoration: none;
}

#Menu a:hover, #Menu a:active {
   color: #333333;
   background-color: #599d7e;
   text-decoration: none;
}



Τώρα θα εισάγουμε το StyleSheet που φτιάξαμε μέσα στην σελίδα μας, οποτε πάνω από το </head> τοποθετούμε τον ακόλουθο κώδικα:
 

κώδικας:
<style type="text/css">
<!--
@import url(Menu.css);
-->
</style>



Τώρα το menu αυτό λειτουργεί σε Firefox και σε Opera (μπορεί και αλλου αλλα δεν έχω δοκιμάσει άλλους) για να λειτουργήσει σε IE 5 πρέπει να εισάγουμε ένα CSS hack το οποιο θα το εισάγουμε μέσα σε Conditional Commentο κώδικας θα τοποθετηθεί πάνω από το </head>

κώδικας:
<!--[if IE 5]>
<style type="text/css">
#Menu a {
   height: 1em;
   float: left;
   clear: both;
   width: 100%;
}
</style>
<![endif]-->



το StyleSheet αυτό θα λειτουργήσει μονο όταν η έκδοση του IE είναι η έκδοση 5
Παρ' ολ' αυτά το menu δεν λειτουργεί σε IE 6 και σε IE 7 οποτε θα πρέπει να ορίσουμε άλλο ένα CSS Hack το οποιο θα είναι μέσα σε Conditional Comment
 

κώδικας:
<!--[if gte IE 6]>
<style type="text/css">
#Menu a {
   height: 1em;
}
</style>
<![endif]-->



το StyleSheet αυτό θα λειτουργήσει μονο όταν η έκδοση του IE είναι 6 η μεγαλύτερη
gte = greater than or equal to (=μεγαλύτερο η ίσο με)

Τώρα με μερικές αλλαγές στον κώδικα μπορούμε να μετατρέψουμε το κάθετο menu σε οριζόντιο.

στο Menu.css θα πρέπει να εφαρμόσουμε τις εξής αλλαγές:


από:

κώδικας:
#Menu {
   float: left;
   width: 200px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 0.8em;
}



σε:

κώδικας:
#Menu {
   float: left;
   width: 100%;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 0.8em;
}



από:

κώδικας:
#Menu li {
   margin: 0px;
}



σε:

κώδικας:
#Menu li {
   float: left;
   white-space: nowrap;
   margin: 0 0 1em 0;
   padding: 0;
}



από:

κώδικας:
#Menu a {
   display: block;
   padding: 4px 4px 4px 25px;
   border-right: 1px solid #000000;
   border-left: 1px solid #000000;
   border-bottom: 1px solid #000000;
   background-color: #599d7e;
   color: #ffffff;
}



σε:

κώδικας:
#Menu a {
   padding: 4px 50px 4px 25px;
   border-right: 1px solid #000000;
   border-left: 1px solid #000000;
   border-bottom: 1px solid #000000;
   background-color: #599d7e;
   color: #ffffff;
}



από:

κώδικας:
<!--[if IE 5]>
<style type="text/css">
#Menu a {
   height: 1em;
   float: left;
   clear: both;
   width: 100%;
}
</style>
<![endif]-->
<!--[if gte IE 6]>
<style type="text/css">
#Menu a {
   height: 1em;
}
</style>
<![endif]-->



σε:

κώδικας:
<!--[if gte IE 5]>
<style type="text/css">
#Menu a {
   position: relative;
   height: 1em;
}
</style>
<![endif]-->



και έτσι έχουμε δημιουργήσει ένα οριζόντιο menu απλά και γρήγορα! icon_biggrin.gif

 

 

Με τον ίδιο τρόπο μπορούμε να φτιάξουμε και dropdown menus

manu.html

 

κώδικας:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<style type="text/css">
<!--
@import url(menu.css);
-->
</style>
<script type="text/javascript">
<!--
subHover = function()
{
   var subEls = document.getElementById("Menu").getElementsByTagName("LI");
   for (var i=0; i<subEls.length; i++)
   {
      subEls.onmouseover=function()
      {
         this.className+=" subhover";
      }
      subEls.onmouseout=function()
      {
         this.className=this.className.replace(new RegExp("subhover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", subHover);
//-->
</script>
</head>

<body>
<div id="Menu">
   <ul>
      <li><a href="#">Category 1</a></li>
      <li><a href="#">Category 2</a>
         <ul>
            <li><a href="#">Sub Category 1</a></li>
            <li><a href="#">Sub Category 2</a>
               <ul>
                  <li><a href="#">Sub Category 2.1</a></li>
                  <li><a href="#">Sub Category 2.2</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li><a href="#">Category 3</a></li>
      <li><a href="#">Category 4</a></li>
   </ul>
</div>
</body>
</html>



menu.css

κώδικας:
#Menu, #Menu ul {
   list-style: none;
   padding: 0;
   margin: 0 0 1em 0;
   width: 60em;
   line-height: 1em;
}

#Menu li {
   float: left;
   white-space: nowrap;
   margin: 0;
   padding: 0;
   width: 10em;
}

#Menu a {
   background-color: #599d7e;
   color: #ffffff;
   padding: 4px 70px 4px 25px;
   border-right: 1px solid #000000;
   border-left: 1px solid #000000;
   border-bottom: 1px solid #000000;
   display: block;
   width: 10em;
   text-decoration: none;   
   /*/*/ width: 6em; /* */
}

#Menu a:link, #Menu a:visited {
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 0.8em;
   color: #ffffff;
   background-color: #599d7e;
   white-space: nowrap;
}

#Menu a:hover, #Menu a:active {
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 0.8em;
   color: #000000;
   background-color: #599d7e;
   white-space: nowrap;
}

#Menu a.parentItem {
   background: url(images/arrow.gif) center right no-repeat;
}

#Menu li ul {
   position: absolute;
   left: -999em;
   height: auto;
   width: 8em;
   margin: 0;
}

#Menu li:hover ul ul, #Menu li.subhover ul ul {
   left: -999em;
}

#Menu li:hover ul, #Menu li li:hover ul, #Menu li.subhover ul, #Menu li li.subhover ul {
   left: auto;
}

#Menu li:hover ul ul, #Menu li:hover ul ul ul, #Menu li.subhover ul ul, #Menu li.subhover ul ul ul {
   left: -999em;
}

#Menu li:hover ul, #Menu li li:hover ul, #Menu li li li:hover ul, #Menu li.subhover ul, #Menu li li.subhover ul, #Menu li li li.subhover ul {
   left: auto;
}

#Menu li li {
   padding-right: 0;
   width: 8em;
}

#Menu li li a {
   width: 10em;
   width: 4em;
}

#Menu li ul ul {
   margin: -1.55em 0 0 8.8em;
}

 

  • Like 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
Sign in to follow this  
Followers 0
Go To Topic Listing
×