Zurück   Web to Date - SIQUANDO Forum > SIQUANDO die neue Web to Date kompatible Lösung: > SIQUANDO web

Antwort
 
LinkBack (6) Themen-Optionen Thema durchsuchen Ansicht
Alt 25.05.2014, 19:38   6 links from elsewhere to this Post. Click to view. #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
Beitrag [TIPP] Navigation an Browseroberkante beim Scrolllen fixieren

Am Beispiel von ReedyCreek.

anbei eine kleine Anleitung. Mittlerweile gibt es zig Scripts/Anleitungen für diesen Effekt.

DEMO >>

1. jquery.sticky.js (Sticky Plugin) im Design-Ordner Kopieren
2.)in der config.ccml:

HTML-Code:
<cc:property id="design.sticky.nav" caption="Navigation oben fixieren" folder="Design" targettype="site" type="boolean" default="0">
<cc:property id="design.sticky.nav.pos" caption="Navigation oben fixieren position" folder="Design" targettype="site" type="long" default="0">
3.)in der global.ccml:

HTML-Code:
<cc:asset src="jquery.sticky.js" dst="jqstick.js" obj="jquery.sticky" noparse="1">
4.) in der navigation.ccml:

a.) VOR </head> einfügen:

HTML-Code:
<cc:if cond="&site.properties.design.sticky.nav">
<!-- Script für fixierter Navigation -->
<script type="text/javascript" src="<cc:print value="&jquery.sticky.url">"></script>
<script>
    $(document).ready(function(){
      $("#fixnav").sticky({ topSpacing: <cc:print value="&site.properties.design.sticky.nav.pos"> });
    });
</script>
</cc:if>
b.) VOR <div id="menu"> einfügen:

HTML-Code:
<cc:if cond="&site.properties.design.sticky.nav">
<!-- Startbereich der fixiert wird -->
<div id="fixnav">
</cc:if>
c.) VOR <div id="content"> einfügen:

HTML-Code:
<cc:if cond="&site.properties.design.sticky.nav">
<!-- Ende DIV für #fixnav -->
</div>
<!-- Endbereich der fixiert wird -->
</cc:if>
d.)
HTML-Code:
<div id="footer"><cc:print value="&site.properties.design.footertext"></div>
NACH <cc:print value="&page.content.text">

verschieben

5.) in der style_design.css ergänzen:

Code:
...
#maincontainer {
    ...
  ...
  <cc:if cond="&site.properties.design.sticky.nav">
  position:relative;
  </cc:if>
}

<cc:if cond="&site.properties.design.sticky.nav">
#fixnav{
  <cc:if cond="&site.properties.design.sticky.nav">
  z-index: 1001;
  </cc:if>
}
</cc:if>
...
...
#content {
    ...
  <cc:if cond="&site.properties.design.sticky.nav">
  position:absolute;
  left: 190px;
  top: 170px;
  z-index: 10;
  </cc:if>
}
...
Das war es schon im Groben. Über die Webseite erweiterten Eigenschaften könnt ihr das Menü global zum Arretieren aktivieren und evtl. die Top-Position (Default 0) festlegen. Bei RC habe ich z.B. -8 angewendet.

Wie Ihr seht ist das ziemlich easy ! Je nach Design sind u.U. Anpassungen erforderlich. Diese Anleitung funktioniert selbstredend natürlich auch für W2D 7 und 8 ...
__________________
Ingo

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

harlekin8 >>

Geändert von harlekin8 (25.05.2014 um 20:27 Uhr)
harlekin8 ist offline   Mit Zitat antworten
Alt 25.05.2014, 19:45   #2 (permalink)
Administrator
 
Benutzerbild von blue
 
Registriert seit: 19.03.2009
Ort: Heide Holstein
Beiträge: 2.737
blue wird schon bald berühmt werden
Standard AW: [TIPP] Navigation an Browseroberkanter beim Scrolllen fixieren

Ja, sehr chic... noch schöner wäre es evtl. oben als PNG mit transparentem Hintergrund...
__________________
cu blue...

Designmodifikationen für Web to Date / SIQUANDO web & shop:

Klicken Sie bitte auf den jeweiligen Screenshot um auf die Online-Demo zu gelangen...
Weitere Informationen zu den einzelnen Modifikationen finden Sie hier: Web to Date / SIQUANDO web & shop Design Umbauten

blue ist offline   Mit Zitat antworten
Alt 25.05.2014, 19:53   #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: [TIPP] Navigation an Browseroberkanter beim Scrolllen fixieren

... da hast du Recht !!

Bis dann !
__________________
Ingo

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

harlekin8 >>
harlekin8 ist offline   Mit Zitat antworten
Alt 25.05.2014, 20:55   #4 (permalink)
Administrator
 
Benutzerbild von blue
 
Registriert seit: 19.03.2009
Ort: Heide Holstein
Beiträge: 2.737
blue wird schon bald berühmt werden
Standard AW: [TIPP] Navigation an Browseroberkanter beim Scrolllen fixieren

Ich habe das vor einiger Zeit mal mit Whistler probiert... allerdings ohne Animation...

Whistler Extreme - SIQUANDO - Web to Date Design
__________________
cu blue...

Designmodifikationen für Web to Date / SIQUANDO web & shop:

Klicken Sie bitte auf den jeweiligen Screenshot um auf die Online-Demo zu gelangen...
Weitere Informationen zu den einzelnen Modifikationen finden Sie hier: Web to Date / SIQUANDO web & shop Design Umbauten

blue ist offline   Mit Zitat antworten
Alt 25.05.2014, 21:16   #5 (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: [TIPP] Navigation an Browseroberkanter beim Scrolllen fixieren

... ja, das passt gut zusammen ...

Hier gibt es noch ein paar lustige Effekte:

Beispiel >>

Wobei mir eine ruhiger Darstellung persönlich lieber ist ...
__________________
Ingo

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

harlekin8 >>
harlekin8 ist offline   Mit Zitat antworten
Alt 25.05.2014, 21:35   #6 (permalink)
Administrator
 
Benutzerbild von blue
 
Registriert seit: 19.03.2009
Ort: Heide Holstein
Beiträge: 2.737
blue wird schon bald berühmt werden
Standard AW: [TIPP] Navigation an Browseroberkanter beim Scrolllen fixieren

Genial... Ich glaube ich muss mal wieder anfangen Designs zu coden... es geht ja nun weiter ;-)
__________________
cu blue...

Designmodifikationen für Web to Date / SIQUANDO web & shop:

Klicken Sie bitte auf den jeweiligen Screenshot um auf die Online-Demo zu gelangen...
Weitere Informationen zu den einzelnen Modifikationen finden Sie hier: Web to Date / SIQUANDO web & shop Design Umbauten

blue ist offline   Mit Zitat antworten
Alt 26.05.2014, 21:13   #7 (permalink)
Erfahrener Benutzer
 
Benutzerbild von renditefinder
 
Registriert seit: 31.08.2010
Ort: Heiligenhaus
Beiträge: 106
renditefinder befindet sich auf einem aufstrebenden Ast
Standard AW: [TIPP] Navigation an Browseroberkanter beim Scrolllen fixieren

Hallo Ingo,
ich komme mit dem Code 5.) für die style_design.css nicht zurecht!
Ist es korrekt, dass folgender Code 2 x eingebaut werden muss?

<cc:if cond="&site.properties.design.sticky.nav">

Grüße
Michael
renditefinder ist offline   Mit Zitat antworten
Alt 27.05.2014, 03:04   #8 (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: [TIPP] Navigation an Browseroberkanter beim Scrolllen fixieren

Hi Michael,

yep, ist so gewollt ...

Der Aufbau ist so zu übersetzen:

Wenn das Plugin zu Fixierung an ist,
GIB das aus,
Ende der Bedingung.

Alles was dann zwischen den "ifs"-Tags steht wird nur dann ausgegeben wenn die erweiterte Eigenschaft aktiviert wurde bzw. auf ja steht.

<cc:if ...>
ANWEISUNGEN
</cc:if>

Diese CSS-Anweisungen sind nur im Falle der fixierten Navigation nötig.

Kannst sie mal auskommentieren bzw. Punkt 5 testhalber erstmal nicht einbauen und schauen was mit dem Design ReedyCreek dann passiert - wenn die eE aktiv ist und diese CSS Befehle fehlen ...

Bye
__________________
Ingo

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

harlekin8 >>

Geändert von harlekin8 (28.05.2014 um 15:34 Uhr)
harlekin8 ist offline   Mit Zitat antworten
Antwort

Lesezeichen

Stichworte
fixieren, menu, navigation, scrollen, siquando shop, siquando web, sticky

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 aus.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


LinkBacks (?)
LinkBack to this Thread: http://www.webtodateforum.de/forum/siquando-web/6802-tipp-navigation-browseroberkanter-beim-scrolllen-fixieren.html
Erstellt von For Type Datum Hits
w2dforum - web to date forum - web 2 date This thread Refback 14.08.2014 14:56 1
Web to Date Forum This thread Refback 22.06.2014 12:34 1
Web to Date 8 - Designmodifikation Kiribati extreme This thread Refback 05.06.2014 19:33 1
Web to Date 8 - Designmodifikation Kiribati extreme This thread Refback 28.05.2014 17:14 2
Web to Date Forum This thread Refback 26.05.2014 07:51 1
Whistler Extreme - SIQUANDO - Web to Date Design This thread Refback 25.05.2014 20:54 1

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Seyffenbrandt Logo fixieren WTD_User Web to Date 7.0 6 22.11.2013 15:59
Suchfeld in Seyffenbrand fixieren zella Web to Date 7.0 1 22.11.2011 20:43
Hintergrund fixieren ernstlustig Web to Date 7.0 1 24.03.2011 10:07
Kopfzeile mit Navigation fixieren, wie? hanno Web to Date 7.0 11 16.02.2011 10:21
position fixieren / pic größe anpassen Zehmo91 Web to Date 6.0 0 30.11.2010 16:33



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,07450 Sekunden mit 17 Datenbankabfragen

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