Zurück   Web to Date - SIQUANDO Forum >

Web to Date - Data Becker
> Web to Date 8.0

Antwort
 
LinkBack Themen-Optionen Thema durchsuchen Ansicht
Alt 11.08.2012, 14:57   #1 (permalink)
Erfahrener Benutzer
 
Benutzerbild von harlekin8
 
Registriert seit: 05.08.2011
Ort: Freiburg
Beiträge: 819
harlekin8 wird schon bald berühmt werdenharlekin8 wird schon bald berühmt werden
Idee Unabhängige Navigation in Sidebar erstellen

Hi Folks,

anbei ein kleines Tutorial zum Thema "freies" Menü/Navigation in der Sidebar erstellen ...

1.) in der config.ccml des Designs den common-Wert auf 0 setzen:

HTML-Code:
<cc:file obj="sidebar.list" src="sidebar_list.ccml" common="0">
und 3 Erweiterte Eigenschaften deklarieren:

HTML-Code:
<cc:property id="design.sitebar.navigation" caption="Als Menüabsatz einsetzen" folder="Sitebar Navigation" targettype="sidebar" targetsubtype="list" type="boolean" default="0">
<cc:property id="design.sitebar.navigation.name" caption="Name Hauptmenüpunkt eingeben" folder="Sitebar Navigation" targettype="sidebar" targetsubtype="list" type="string" default="Kein Menüname">
<cc:property id="design.sitebar.navigation.event" caption="Menü Ausklappart wählen" folder="Sidebar Navigation" targettype="site" type="combo" comboitems="click|mouseover" default="click">
2.) sidebar_list.ccml in das entspr. Design-Ordner verschieben

3.) die sidebar_list.ccml (je nach Design) das orangene ergänzen:

Code:
<cc:*>----------NAVIGATION SIDEBARLEFT-----------------------</cc:*>

<cc:if cond="&mysidebar.properties.design.sitebar.navigation">  
<div class="navigation">
<ul>
<li><a href="#self"><cc:print value="&mysidebar.properties.design.sitebar.navigation.name"></a>
<ul class="navisub">

<cc:else>  

<ul class="contentlist kontakt">
</cc:if>
<cc:loop type="list" obj="mylist">
<li><cc:print value="&mylist.text"></li>
</cc:loop>
</ul>

<cc:*>---- ABSCHLIESSENDE LI-AUSGABE MENÜ ----</cc:*>
<cc:if cond="&mysidebar.properties.design.sitebar.navigation">
</li>
</ul>
</div>
</cc:if>
4.) und in der global.ccml die 2 Button-Grafiken (zuvor im design-Ordner kopieren - man kann es auch mit nur einer Grafik lösen) anmelden

Code:
<cc:asset src="mnbutup.png" dst="mup.png" obj="mbup" noparse="1">
<cc:asset src="mnbutdwn.png" dst="mdwn.png" obj="mbdwn" noparse="1">
5.) in der navigation.ccml folgenden Codeschnipsel hinzufügen:

Code:
<!-- Navigation Sidebar links -->
<cc:if cond="&site.properties.design.sitebar.navigation.event.number=2">
<cc:set obj="eventtyp" value="mouseover">
<cc:else>
<cc:set obj="eventtyp" value="click">
</cc:if>
<script type=text/javascript>
// Navigation Sidebar links

$(document).ready(function() {
    $('.navigation > ul > li > a')
    .<cc:print value="&eventtyp">(function() {
        $(this).toggleClass("navauf");
        var current = $(this);
        $(this).next('ul').slideToggle('slow');
     });
});</script>
6.)in der style_content.css folgende Zeilen einfügen - bzw. nach Bedarf anpassen:

Code:
/* Sidebar Navigation */

.navigation {
  height: auto;
  padding: 0;
}

.navigation ul {
    list-style-type: none !important;
      margin: 0;
      padding: 0;
}

.navigation > ul > li {
  background-image: url(../<cc:print value="&mbup.url">);
  background-repeat: no-repeat;  
}

.navigation > ul  > li > a {
    color: #f7f7f7 !important; 
    padding: 14px 0 15px 15px !important;
    text-transform: uppercase;
    font-size: 1em !important;
}

.navauf {
    background-image: url(../<cc:print value="&mbdwn.url">);
    background-repeat: no-repeat;
}

#sbcontainer1 h2 {
  display: none;
}

.navigation li a {
    display: block !important;
}

.navigation li a:hover {
    color: #A25644 !important;
}

.navigation > ul  > li > a:hover {
    color: #f7f7f7 !important;
} 

.navigation li ul.navisub {
    display: block;
    padding: 0 !important;
        
}        

.navigation a {
    outline: none;
    text-decoration: none !important;
}

.navigation .navisub  a {
    background-color: #ccc !important;
    color: #3D3644 !important;
    padding: 10px 0 10px 20px !important;
  border-bottom: 1px solid #ababab;
}

.navigation .navisub  a:hover {
    padding-left: 30px !important;
    font-weight: bold !important;
}
... So das war es im Groben ...

Über die Websiten Erwei. Eigen. kann man zwischen "Click-Event / Mouseover-Event" wählen ...

Wenn man jetzt in der Sidebar geht und einen Absatz des Typen "Aufzählung" einfügt und F4 tätigt, kann man:

a.) eine Menüüberschrift eingeben
b.) diesen Absatz als Navigations-Einheit aktivieren ...

dann nur noch die einzelnen Aufzählungspunkte verlinken ...

das war's.

Beispiel: hier (Benutzer:Arowa Kennwort: pappnase)

EDIT: der Dateinanhang-Modul lässt sich hier im Forum leider nicht öffnen
...

Viel Erfolg
__________________
Ingo

... falls Ihr euch für die geleistete Arbeit erkenntlich zeigen wollt, hier mein Amazon Wunschzettel >>

harlekin8 >>

Geändert von harlekin8 (14.08.2012 um 01:33 Uhr)
harlekin8 ist offline   Mit Zitat antworten
Alt 12.08.2012, 13:25   #2 (permalink)
Erfahrener Benutzer
 
Benutzerbild von inselpiraat
 
Registriert seit: 12.03.2010
Ort: Nordhorn
Beiträge: 465
inselpiraat befindet sich auf einem aufstrebenden Ast
Standard AW: Unabhängige Navigation in Sidebar erstellen

Moin Ingo,

und besten Dank für das Tutorial - super gemacht.

Bei der Durchsicht ist mir ein kleines Manko aufgefallen -schau dir bitte mal die Überschriften an - dort fehlt mir ein 2-3px Abstand zu den Unterpunkten - die Button sehen nicht gut aus im oberen Bereich - da fehlt ein weißer Streifen.

VG
inselpiraat ist offline   Mit Zitat antworten
Alt 12.08.2012, 14:02   #3 (permalink)
Erfahrener Benutzer
 
Benutzerbild von harlekin8
 
Registriert seit: 05.08.2011
Ort: Freiburg
Beiträge: 819
harlekin8 wird schon bald berühmt werdenharlekin8 wird schon bald berühmt werden
Standard AW: Unabhängige Navigation in Sidebar erstellen

Hi Michael,

danke ... Muß bei Bedarf noch angepasst werden - da es auf ein bestimmtes Design aufbaut, müssen hier und da je nach Design noch ein paar CSS-Einstellungen vorgenommen werden ... Hängt natürlich auch von den Grafiken die man benutzt ab. Bei mir sieht alles sauber aus ...

Das praktische ist du kannst das Verhalten auch via CSS regeln - Bsp. dass die Menüs alle eingeklappt sind ...

HEISST ... man kann auch da noch weitere Erweiterte Eigenschaften einbauen und so quasi ein eigenes "Plugin" erstellen ...

Servus !!
__________________
Ingo

... falls Ihr euch für die geleistete Arbeit erkenntlich zeigen wollt, hier mein Amazon Wunschzettel >>

harlekin8 >>

Geändert von harlekin8 (12.08.2012 um 18:24 Uhr)
harlekin8 ist offline   Mit Zitat antworten
Antwort

Lesezeichen

Stichworte
kontextspalte, menü, navigation, sidebar

Themen-Optionen Thema durchsuchen
Thema durchsuchen:

Erweiterte Suche
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Sidebar in Phi Parcy Web to Date 6.0 5 26.05.2012 08:32
Sidebar reikowi Web to Date 8.0 0 17.12.2011 23:21
Phi - Sidebar schrulla@online Web to Date 7.0 16 15.04.2011 23:00
Pop-Up erstellen Wolfsspure Web to Date 5.0 6 04.04.2010 15:10
Sidebar Matthias Web to Date 6.0 1 01.01.2010 00:08



Alle Zeitangaben in WEZ +2. Es ist jetzt 17:26 Uhr.
Powered by vBulletin® Version 3.8.2 (Deutsch) - Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.3.0 PL2
Seite generiert in 0,06737 Sekunden mit 12 Datenbankabfragen

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16