TopGloob Apps: Menu

Κάντε κλικ στο κουμπί EDIT HTM L . Τώρα κάντε κλικ στο κουμπί Προχωρήστε . Βρείτε αυτήν την ετικέτα με τη χρήση του Ctrl + F ]]> </ b: skin> .Επικολλήστε παρακάτω κώδικα Πριν ]]> </ b: skin> tag
View Demo- http://demo.bloggertrix.com/2013/02/blog-post.html

..........................................

/* The CSS Code for the menu starts here bloggertrix.com */  .ribbon span {     background:#A81B6A;     display:inline-block;     line-height:3em;     padding:0 1em;     margin-top:0.5em;     position:relative;       -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */     -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */     -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */     -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */     transition: background-color 0.2s, margin-top 0.2s; } .ribbon a:hover span {     background:#FFD204;     margin-top:0;     } .ribbon span:before {     content: "";     position:absolute;     top:3em;     left:0;     border-right:0.5em solid #9B8651;     border-bottom:0.5em solid #fff; }  .ribbon span:after {     content: "";     position:absolute;     top:3em;     right:0;     border-left:0.5em solid #9B8651;     border-bottom:0.5em solid #fff; } .ribbon a:link, .ribbon a:visited {      color:#000;     text-decoration:none;     float:left;     height:3.5em;     overflow:hidden; } .ribbon:after, .ribbon:before {     margin-top:0.5em;     content: "";     float:left;    border: 1.5em solid #A81B6A; } .ribbon:after {     border-right-color:transparent; }  .ribbon:before {     border-left-color:transparent; }

Μετάβαση στο blogger και κάντε κλικ στην επιλογή Διάταξη
Κάντε κλικ στο κουμπί Προσθήκη gadget και επιλέξτε "HTML / Javascript
Επικολλήστε παρακάτω κώδικα.
------------------------------

<div class='ribbon'>    <a href='#'><span>Home</span></a>    <a href='#'><span>Download</span></a>    <a href='#'><span>Css3</span></a>    <a href='#'><span>HTML</span></a>    <a href='#'><span>MySQL</span></a>    <a href='#'><span>Services</span></a>    <a href='http://www.bloggertrix.com/'><span>Contact</span></a></div>

Αντικαταστήστε το # με τις συνδέσεις σας. 10. αποθηκεύσετε τώρα σας HTML / Javascript ". Τελειώσατε
http://www.bloggertrix.com/2013/02/modern-ribbon-hover-effect-menu-bar-for.html

βασίζεται σε κώδικα CSS, και έχει πολλές διαφορετικές επεκτάσεις (μπορείτε να βάλετε τα πάντα...από link, μέχρι chat και εικόνες με κείμενο)
1-με το width ρυθμίζετε το πλάτος του drop down (αναπτυσσόμενο)...
2-μπορείτε να βάλετε όλο το κώδικα σε ένα gadget ψηλά στο blog σας (κάτω από την επικεφαλίδα)...

ΠΗΓΗ: http://net.tutsplus.com/

Ο ΚΩΔΙΚΑΣ ΓΙA ΤΟ ΑΠΛΟ ΜΕΝΟΥ: HTML & CSS

..............................

<div id="menu"><li><a href="#" class="drop">Home</a><!-- Begin Home Item -->         <div class="dropdown_2columns"><!-- Begin 2 columns container -->             <div class="col_2">                 <h2>Welcome !</h2></div><div class="col_2">                 <p>Εδω γράφετε ένα μικρό η μεγάλο μήνυμα καλωσορίσματος</p><p>Εδω γράφετε ένα μικρό η μεγάλο μήνυμα καλωσορίσματος</p></div><div class="col_2">                 <h2>Φωτογραφία + κειμενο</h2></div><div class="col_1">                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJyRd9Pucekxgon6qwYvoOnh5AYRnL7cfnGHjyGjXqFQ6TjTg6PYf2U4JhLmJthrDiscWzzVf0YjupnFAARn9xFJ6aq_ohfhJ6ONKnS8aISlellTXc_yf5LVBEiW_LYdGwzYNLX1leFEas/s1600/browsers.png" width="125" height="48" alt="" />             </div><div class="col_1">                 <p>Εδώ βάζετε ένα κείμενο για τη φωτογραφία που θα βαλετε δίπλα</p></div></div><!-- End 2 columns container -->     </li><!-- End Home Item --><li class="menu_right"><a href="#" class="drop">1 Column</a>   <div class="dropdown_1column align_right">                 <div class="col_1">                     <ul class="greybox"><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><li><a href="#">Link 5</a></li><li><a href="#">Link 6</a></li><li><a href="#">Link 7</a></li><li><a href="#">Link 8</a></li></div><li class="menu_right"><a href="#" class="drop">1 Column</a>   <div class="dropdown_1column align_right">                 <div class="col_1">                     <ul class="greybox"><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><li><a href="#">Link 5</a></li><li><a href="#">Link 6</a></li><li><a href="#">Link 7</a></li></div><li class="menu_right"><a href="#" class="drop">1 Column</a>   <div class="dropdown_1column align_right">                 <div class="col_1">                     <ul class="greybox"><li><a href="#">FreelanceSwitch</a></li><li><a href="#">Creattica</a></li><li><a href="#">WorkAwesome</a></li><li><a href="#">Mac Apps</a></li><li><a href="#">Web Apps</a></li><li><a href="#">NetTuts</a></li><li><a href="#">VectorTuts</a></li><li><a href="#">More...</a></li></ul></div></div></li></div><style type="text/css">/*<![CDATA[*/body, ul, li {  font-size:14px;  font-family:Arial, Helvetica, sans-serif;  line-height:21px;  text-align:left; }  /* Navigation Bar */  #menu {  list-style:none;  width:440px;  margin:0px auto 0px auto;  height:43px;  padding:0px 20px 0px 20px;   /* Rounded Corners */   -moz-border-radius: 10px;  -webkit-border-radius: 10px;  border-radius: 10px;   /* Background color and gradients */   background: #014464;  background: -moz-linear-gradient(top, #0272a7, #013953);  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));   /* Borders */   border: 1px solid #002232;   -moz-box-shadow:inset 0px 0px 1px #edf9ff;  -webkit-box-shadow:inset 0px 0px 1px #edf9ff;  box-shadow:inset 0px 0px 1px #edf9ff; }  #menu li {  float:left;  text-align:center;  position:relative;  padding: 4px 10px 4px 10px;  margin-right:30px;  margin-top:7px;  border:none; }  #menu li:hover {  border: 1px solid #777777;  padding: 4px 9px 4px 9px;   /* Background color and gradients */   background: #F4F4F4;  background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));   /* Rounded corners */   -moz-border-radius: 5px 5px 0px 0px;  -webkit-border-radius: 5px 5px 0px 0px;  border-radius: 5px 5px 0px 0px; }  #menu li a {  font-family:Arial, Helvetica, sans-serif;  font-size:14px;  color: #EEEEEE;  display:block;  outline:0;  text-decoration:none;  text-shadow: 1px 1px 1px #000; }  #menu li:hover a {  color:#161616;  text-shadow: 1px 1px 1px #FFFFFF; } #menu li .drop {  padding-right:21px;  background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyauQTSqAO0viacZE40elUs7q6olouq7TtDx0Cme-aJDzheahq3YjDWumLzDEpzXP-_4kdX9VVjCZl6qr-2hMbtPzuxUYYFvHPuUSlyb3GJHQCz0Obyfm02e8SdZfeSMq4KKWLFHf9c5a-/s1600/drop.png") no-repeat right 8px; } #menu li:hover .drop {  background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyauQTSqAO0viacZE40elUs7q6olouq7TtDx0Cme-aJDzheahq3YjDWumLzDEpzXP-_4kdX9VVjCZl6qr-2hMbtPzuxUYYFvHPuUSlyb3GJHQCz0Obyfm02e8SdZfeSMq4KKWLFHf9c5a-/s1600/drop.png") no-repeat right 7px; }  /* Drop Down */  .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns {  margin:4px auto;  float:left;  position:absolute !important;  left:-999em; /* Hides the drop down */  text-align:left;  padding:10px 5px 10px 5px;  border:1px solid #777777;  border-top:none;   /* Gradient background */  background:#F4F4F4;  background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));   /* Rounded Corners */  -moz-border-radius: 0px 5px 5px 5px;  -webkit-border-radius: 0px 5px 5px 5px;  border-radius: 0px 5px 5px 5px; }  .dropdown_1column {width: 240px;}     #menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns {  left:-1px ; z-index:444 !important;     top:auto; }  /* Columns */  .col_1, .col_2, .col_3, .col_4, .col_5 {  display:inline;  float: left;  position: relative;  margin-left: 5px;  margin-right: 5px; } .col_1 {width:130px;} .col_2 {width:270px;} .col_3 {width:410px;} .col_4 {width:550px;} .col_5 {width:690px;}  /* Right alignment */  #menu .menu_right {  float:right !important;  margin-right:0px; } #menu li .align_right {  /* Rounded Corners */  -moz-border-radius: 5px 0px 5px 5px;     -webkit-border-radius: 5px 0px 5px 5px;     border-radius: 5px 0px 5px 5px; } #menu li:hover .align_right {  left:auto;  right:-1px;  top:auto; }  /* Drop Down Content Stylings */  #menu p, #menu h2, #menu h3, #menu div li {  font-family:Arial, Helvetica, sans-serif;  line-height:21px;  font-size:12px;  text-align:left;  text-shadow: 1px 1px 1px #FFFFFF; } #menu h2 {  font-size:21px;  font-weight:400;  letter-spacing:-1px;  margin:7px 0 14px 0;  padding-bottom:14px;  border-bottom:1px solid #666666; } #menu h3 {  font-size:14px;  margin:7px 0 14px 0;  padding-bottom:7px;  border-bottom:1px solid #888888; } #menu p {  line-height:18px;  margin:0 0 10px 0; }  #menu li:hover div a {  font-size:12px;  color:#015b86; } #menu li:hover div a:hover {  color:#029feb; } .strong {  font-weight:bold; } .italic {  font-style:italic; } .imgshadow {  background:#FFFFFF;  padding:4px;  border:1px solid #777777;  margin-top:5px;  -moz-box-shadow:0px 0px 5px #666666;  -webkit-box-shadow:0px 0px 5px #666666;  box-shadow:0px 0px 5px #666666; } .img_left { /* Image sticks to the left */  width:auto;  float:left;  margin:5px 15px 5px 5px; } #menu li .black_box {  background-color:#333333;  color: #eeeeee;  text-shadow: 1px 1px 1px #000;  padding:4px 6px 4px 6px;   /* Rounded Corners */  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;   /* Shadow */  -webkit-box-shadow:inset 0 0 3px #000000;  -moz-box-shadow:inset 0 0 3px #000000;  box-shadow:inset 0 0 3px #000000; } #menu li ul {  list-style:none;  padding:0;  margin:0 0 12px 0; } #menu li ul li {  font-size:12px;  line-height:24px;  position:relative;  text-shadow: 1px 1px 1px #ffffff;  padding:0;  margin:0;  float:none;  text-align:left;  width:130px; } #menu li ul li:hover {  background:none;  border:none;  padding:0;  margin:0; } #menu li .greybox li {  background:#F4F4F4;  border:1px solid #bbbbbb;  margin:0px 0px 4px 0px;  padding:4px 6px 4px 6px;  width:216px;   /* Rounded Corners */  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px; } #menu li .greybox li:hover {  background:#ffffff;  border:1px solid #aaaaaa;  padding:4px 6px 4px 6px;  margin:0px 0px 4px 0px; }  .tabs-inner .widget li a { padding: 1px ; display:block !important; border: 1px solid  transparent !important ; }   /*]]>*/ </style>

.......................http://www.dr-blogger.com/2012/11/mega-menu.html#more

TopGloob Apps

Σελίδες

Σύγχρονη Κορδέλα Hover Effect Bar Μενού Για Blogger

Follow baner color

Από τα πιο όμορφα μενού για ιστοσελίδες

Χρήσιμο menu

Webdesign

Blogs

Αρχειοθήκη ιστολογίου

Ετικέτες