1 JavaScript Προφίλ [PhpBB3 & PhpBB2] 19/12/2011, 06:29
|
Παράδειγμα μπορείτε να δείτε εδώ: https://2img.net/u/1211/25/36/03/album/ro0ra10.png
Με το που βάλεις το δείκτη του ποντικιού στο "Προφίλ" βγαίνει ένα πολύ ωραίο μενού.
Για PhpBB3
1. Φτιάχνετε ένα widget και βάζετε το παρακάτω μέσα:
- Κώδικας:
<style type="text/css">
ul.linklist li {
position: relative;
float:left;
}
li:hover #prof-content {
opacity: 1;
visibility: visible;
margin-top: -5px;
}
#prof-content {
margin-top: 5px;
margin-left: -7px;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 29px;
z-index: 999;
background-color: #fff;
padding: 5px;
-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
#prof-content a {
display:block;
width: 150px;
text-align: left !important;
margin-left: 5px;
}
</style>
<div style="display:none"><div id="prof-content">
<a href="/profile?mode=editprofile&page_profil=informations">Πληροφορίες</a>
<a href="/profile?mode=editprofile&page_profil=preferences">Επιλογές</a>
<a href="/profile?mode=editprofile&page_profil=signature">Υπογραφή</a>
<a href="/profile?mode=editprofile&page_profil=avatars">Άβαταρ</a>
<a href="/profile?mode=editprofile&page_profil=friendsfoes">Φίλοι και εχθροί</a>
<a href="/search?search_id=watchsearch">Παρακολούθηση Θεμάτων</a>
<a href="/search?search_id=favouritesearch">Αγαπημένα</a>
<a href="/search.forum?search_id=egosearch">Μηνύματα μου</a>
</div>
</div>
2. Μετά πάτε: ΠΔ - Λειτουργικές Μονάδες - HTML & JAVASCRIPT - Javascript codes management πατάτε "Create an new JavaScript" και συμπληρώνετε έτσι:
Title * : Προφίλ
Placement : In all the pages (Αν δεν το βάλετε δεν θα παίξει τίποτα!)
Javascript Code * : Βάζετε το παρακάτω
- Κώδικας:
jQuery(document).ready(function(){
jQuery("#prof-content").appendTo("li:has(a[href$='profile?mode=editprofile'])");
});
Και πατάτε "Υποβολή"
Επίσης πρέπει να έχετε το "Enable Javascript code management :" στο "Ναι"
Για phpBB2
1. Στο πρότυπο overall_header ψάχνετε για:
- Κώδικας:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
Και μέσα στον κωδικό αλλάξτε αυτό:
- Κώδικας:
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
με αυτό:
- Κώδικας:
<td align="{MENU_POSITION}"{MENU_NOWRAP} class="gennavbar">{GENERATED_NAV_BAR}</td>
(δλδ. ορίζετε κλάση σε κελί)
Ακριβός ποιο κάτω βάζετε το μενού:
- Κώδικας:
<div style="display:none">
<div id="prof-content">
<a href="/profile?mode=editprofile&page_profil=informations">Πληροφορίες</a>
<a href="/profile?mode=editprofile&page_profil=preferences">Επιλογές</a>
<a href="/profile?mode=editprofile&page_profil=signature">Υπογραφή</a>
<a href="/profile?mode=editprofile&page_profil=avatars">Άβαταρ</a>
<a href="/profile?mode=editprofile&page_profil=friendsfoes">Φίλοι και εχθροί</a>
<a href="/search?search_id=watchsearch">Παρακολούθηση Θεμάτων</a>
<a href="/search?search_id=favouritesearch">Αγαπημένα</a>
<a href="/search.forum?search_id=egosearch">Μηνύματα μου</a>
</div>
</div>
Τώρα, αποθηκεύετε το πρότυπο και το δημοσιεύετε.
2. Μετά πάτε: ΠΔ - Λειτουργικές Μονάδες - HTML & JAVASCRIPT - Javascript codes management πατάτε "Create an new JavaScript" και συμπληρώνετε έτσι:
Title * : Προφίλ
Placement : In all the pages (Αν δεν το βάλετε δεν θα παίξει τίποτα!)
Javascript Code * : Βάζετε το παρακάτω
- Κώδικας:
jQuery(document).ready(function(){
jQuery("#prof-content").appendTo("a[href$='profile?mode=editprofile']");
});
Και πατάτε "Υποβολή"
Επίσης πρέπει να έχετε το "Enable Javascript code management :" στο "Ναι"
3. Στο CSS βάζετε:
- Κώδικας:
.gennavbar a {
position: relative;
float:left;
}
#prof-content {
margin-top: -15px;
margin-left: -5px;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 23px;
z-index: 999;
background: #fff;
padding: 5px;
text-align: left;
-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
#prof-content a {
display:block;
width: 150px;
margin: 0 0 5px 5px;
}
a:hover #prof-content {
opacity: 1;
visibility: visible;
margin-top: -5px;
}
Είστε έτυμοι.
Ότι πρόβλημα προκύψει ρωτήστε μας εδώ.