Blogkészítési Tippek XVII. - Legördülő menü

Azok akik szeretnének minden igényt kielégítő, tartalmas blogot írni, azoknak nagy vágya lehet egy olyan menü létrehozása amely kellőképpen mozgékony, könnyen átalakítható és felhasználó szemmel is megfelelő.

Eredetileg egy olyan menüt akartam nektek megmutatni, ami még ennél is sokkal egyszerűbb, de azzal technikai gondok adódtak így kénytelen voltam másik megoldást keresni. Ezért késett ez a cikk egy hetet. Most viszont itt van. Kezdjünk is neki minél hamarabb.

Megnézem a DEMO blogon!

FONTOS!! Ez a legördülő menü modul nem minden esetben alkalmas Artisteer programmal készített blogger sablonokhoz.

Menj a blogger kezelőfelületére és ott válaszd ki a "Sablon" menüpontot majd a "HTML Kód" szerkesztése gombot.

Ha ez meg van, kattints bele a HTML kódodba és nyomd meg a Ctrl+F billentyűkombinációt! Keress rá az alábbi küdrészletre:

</header>

Majd közvetlenül ez alá a kódrészlet alá másold be az alábbi kódrészletet:

<div id="contact-links">
<div id="my-links">
<a href="#">Rólam</a>
<a href="#">Kapcsolat</a>
<a href="#"><img height="18px" src="http://mylifefactory.hu/images/1432011180_facebook-128.png" title="Facebook" width="18px" /></a>
<a href="#"><img height="18px" src="http://mylifefactory.hu/images/1445889968_twitter.png" title="Twitter" width="18px" /></a>
<a href="#"><img height="18px" src="http://mylifefactory.hu/images/1432011174_googleplus-128.png" title="Google" width="18px" /></a>
<a href="#"><img height="18px" src="http://mylifefactory.hu/images/1432011150_youtube2-128.png" title="Youtube" width="18px" /></a>
</div>
<div id="menu-container">
<br />
<br />
<nav id="neat-menu">
<ul>
<li class="active"><a href="#">Kezdőlap</a></li>
<li><a href="#">Legördülő Menü</a>
<ul>
<li><a href="#">Aloldal 1</a></li>
<li><a href="#">Aloldal 2</a></li>
<li><a href="#">Aloldal 3</a></li>
<li><a href="#">Aloldal 4</a></li>
<li><a href="#">Aloldal 5</a></li>
</ul>
</li>
<li><a href="#">Legördülő</a>
<ul>
<li><a href="#">Aloldal 1</a></li>
<li><a href="#">Aloldal 2</a></li>
<li><a href="#">Aloldal 3</a></li>
<li><a href="#">Aloldal 4</a></li>
<li><a href="#">Aloldal 5</a></li>
</ul>
</li>
<li><a href="#">Legördülő</a>
<ul>
<li><a href="#">Aloldal 1</a></li>
<li><a href="#">Aloldal 2</a></li>
<li><a href="#">Aloldal 3</a></li>
<li><a href="#">Aloldal 4</a></li>
<li><a href="#">Aloldal 5</a></li>
</ul>
</li>
<li><a href="#">Egyszerű Menüpont</a></li>
<li><a href="#">Legördülő</a>
<ul>
<li><a href="#">Aloldal 1</a></li>
<li><a href="#">Aloldal 2</a></li>
<li><a href="#">Aloldal 3</a></li>
<li><a href="#">Aloldal 4</a></li>
<li><a href="#">Aloldal 5</a></li>
</ul>
</li>
</ul>
</nav>



<div id="menu-search">
<form action="/search" method="get">

<input autocomplete="off" name="q" placeholder="keress..." type="text" value="" /></form>

</div>

</div></div>

Színek és jelentésük:
Kék: a menüpontok nevének színei. Írd át nyugodtan arra amire szükséged van!
Piros: A kettőskeresztek! Ezeknek a helyére mennek az oldalak és aloldalak linkjei. Figyelj!, hogy a linkek mindig az idézőjelek között maradjanak!

Menüpontok szerkesztése:
Ha az általam megadott menüfában túl sok vagy éppen túl kevés a menüpont, könnyedén szerkesztheted azt a következőképpen.
Ha csak egy szimpla menüpontot szeretnél, akkor a következő kódot másold be a kellő helyre:

<li><a href="#">Egyszerű Menüpont</a></li>

Ha olyan menüpontot szeretnél, aminek vannak almenüpontjai akkor a következő kódra lesz szükséged:

<li><a href="#">Legördülő Menü</a>
<ul>
<li><a href="#">Aloldal 1</a></li>
</ul>
</li>

Aloldalt annyit raksz be amennyit csak szeretnél. Javaslom azonban, hogy tartsd szem előtt egy előző cikkemben leírt szempontokat.

Ha ezzel meg vagy akkor már csak egy dolgot kell bemásolni a HTML kódodba.
Keress rá a már megszokott Ctrl+F billentyűkombinációval az alábbi kódrészletre:

]]></b:skin>

Majd közvetlenül efelé a kódrészlet felé másold be az alábbi css kódot:

#contact-links {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: auto;
position: relative;
width: 70%;
}
#contact-links a {
color: #4C9FEB;
}
#contact-links a:hover {
color: #3D85C6;
}
#my-links {
float: right;
font-size: 12px;
margin: 4px 10px;
overflow: hidden;
text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
margin-left: 7px;
padding-left: 8px;
text-decoration: none;
}
#my-links a:first-child {
border-width: 0;
}
#menu-container {
background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
border-radius: 0 0 0px 0px;
border:1px solid rgba(0,0,0,0.1);
box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
clear: both;
height: 46px;
padding-top: 0px;
}
#neat-menu {
float: left;
}
#neat-menu a {
text-decoration: none;
}
#neat-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#neat-menu > ul > li {
float: left;
padding-bottom: 12px;
}
#neat-menu ul li a {
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
border-color: #D1D1D1;
border-image: none;
border-style: solid;
border-width: 0 1px 0 0;
color: #333333;
display: block;
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 11px 15px 10px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-bottom: 1px solid #2D81CC;
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
margin: -1px 0 -1px -1px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
border-radius: 0 0 0 0px;
}
#neat-menu ul ul {
background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border-radius: 5px 5px 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 #FFFFFF inset;
height: 0;
margin-top: 1px;
opacity: 0;
overflow: hidden;
width: 240px;
padding: 0;
position: absolute;
visibility: hidden;
z-index: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#neat-menu ul li:hover ul {
margin-top: 0\2;
height: auto;
opacity: 1;
visibility: visible;
}
#neat-menu ul ul a {
border-right-width: 0;
border-top: 1px solid #D1D1D1;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #444444;
height: 24px;
line-height: 24px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
border-top-width: 0;
}
#menu-search {
margin:8px 10px 0 0;
float: right;
}
#menu-search form {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioVRY_Pzv2TQttJt5bwk78KmxzeZyaMqgOAx7fyC9OIXOqbYM522LyiQsV36KXgHFgtFdmjyJb8Z4ztpMHDEC2bbfcwZ_5LEE9S_8sbkDQoxj9XVe-cweGxlbhpAKri4pV1fcoYPeZybzD/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
height: 26px;
padding: 0 25px;
position: relative;
width: 130px;
}
#menu-search form:hover {
background-color: #F9F9F9;
}
#menu-search form input {
color: #999999;
font-size: 13px;
height: 26px;
text-shadow: 0 1px 0 #FFFFFF;
background: none repeat scroll 0 0 transparent;
border: medium none;
float: left;
outline: medium none;
padding: 0;
width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
color: #C4C4C4;>
}

A sárgával kiemelt % megadásával tudod változtatni a teljes menü szélességét. Megadhatsz pontos pixel méretet is, csak akkor a szám végén a % jelet cseréld ki erre: px

Keresés ebben a blogban

MYLIFEFACTORY

Blogkészítési Tippek XVII. - Legördülő menü

Megjegyzések

Megjegyzés küldése