@ Customize design - Style sheet (CSS) beigās ieliekam:
Code
/* Izlecošs info logs pogai
------------------------------------------*/
.menu_n {
float:left;
display:block;
position:relative;
padding: 4px 8px;
background:#afd5eb;
border:1px solid #84ABC2;
}
.menu_n .drop{
font: 11px Verdana,Arial,Helvetica, sans-serif; font-weight: bold;
color:#226891; text-shadow:1px 1px 1px #fff;
outline:0;
}
.menu_n:hover .drop{
color:#2784b4;
}
.dd_ugol1,
.dd_menu {
width:240px;
}
.dd_menu {
float:left;
position:absolute;
margin:0px auto;
background:#4c4c4c;
padding:5px;
left:-999em;
z-index:998;
border:1px solid #111;
-moz-border-radius:5px 5px 5px ;
-webkit-border-radius:5px 5px 5px ;
border-radius:5px 5px 5px ;
box-shadow: 0px 0px 5px #111;
}
.menu_n:hover .dd_menu{
left:auto;
right:0px;
bottom:30px;
}
.dd_ugol1 {
height:25px;
float:left;
position:absolute;
bottom: -25px;
right: 10px;
background: no-repeat;
background-position: right top;
}
.dd_menu_os {
overflow:hidden;
width:218px;
background:#eee;
border: 1px solid #353535;
margin:0;
padding:10px;
}
Vietā, kurā vēlamies ievietot pogu ar izlecošo info logu:
Code
<div class="menu_n">
<a href="#" class="drop">uCozwebmeistars</a>
<div class="dd_menu">
<span class="dd_ugol1"></span>
<div class="dd_menu_os">
Esiet sveicināti @ uCozwebmeistars - portālā, kas paredzēts gan iesācējiem, gan veterāniem, saistībā par un ap ucoz sistēmu
</div>
</div>
</div>
Iznākums:
[Info]Šo kodu piemērā poga ir bez jebkādas saites uz kaut kurieni, bet gan kā paraugs, kad uzvelkot vienkārši kursoru uz pogas - izlec informācijas logs[/Info]