Download 1.12.2

Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

Seiten: 1

#1 28. Juli 2011 10:04

AL-d82
Server-Pate
Ort: Heilbronn / Göppingen
Registriert: 18. Dezember 2010
Beiträge: 149
Webseite

[gelöst]Fremd Menü (Awesome-Slide-Down-Box) in CMSMS Template umsetzen

Ist es möglich dieses Menü für cmsMS zu "übersetzen"

Menü:
http://www.htmldrive.net/items/show/199 … n-Box-Menu

Ich hab versucht das zu probieren aber das war wohl nichts yikes)
Dazu hab ich das Template von simple_navigation genommen:

  <div class="sdt_box">
   <a href="#">Websites</a>
   <a href="#">Illustrations</a>
   <a href="#">Photography</a>
  </div>

sind ja die Unterpunkte sprich der 2.level
aber wo muss das im Template hin damit es dann fürs 2. level erzeugt wird?

Ich weiß das geht bestimmt nicht so ohne weiteres?


 Hier klicken, um den Code zum Kopieren zu markieren
{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<ul id="sdt_menu" class="sdt_menu">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->parent == true or $node->current == true}
  {assign var='classes' value='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  <li class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent">
 <a class="parent" href="{$node->url}>
   <img src="images/1.jpg" alt=""/>
   <span class="sdt_active"></span>
   <span class="sdt_wrap">
    <span class="sdt_link">{$node->menutext}</span>
    <span class="sdt_descr">My work</span>
   </span>
  </a>
  <div class="sdt_box">
   <a href="#">Websites</a>
   <a href="#">Illustrations</a>
   <a href="#">Photography</a>
  </div>

<a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->current == true}
<li class="currentpage"><h3><span>{$node->menutext}</span></h3>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Greez AL


Lösungsvorschlag: in Post #7

Beitrag geändert von AL-d82 (30. Juli 2011 14:17)

Offline

#2 28. Juli 2011 21:36

nockenfell
Moderator
Ort: Gontenschwil, Schweiz
Registriert: 09. November 2010
Beiträge: 2.934
Webseite

Re: [gelöst]Fremd Menü (Awesome-Slide-Down-Box) in CMSMS Template umsetzen

Mit $node->depth könntst du einiges anfangen, denke ich. Für die verschiedenen Stufen des Menüs hast du jeweils andere Voraussetzungen.

Die $node->depth kann dir dabei helfen das richtige anzuzeigen.

[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#3 29. Juli 2011 21:18

AL-d82
Server-Pate
Ort: Heilbronn / Göppingen
Registriert: 18. Dezember 2010
Beiträge: 149
Webseite

Re: [gelöst]Fremd Menü (Awesome-Slide-Down-Box) in CMSMS Template umsetzen

Nun ja irgendwie bekomme ich das so net hin :-p

Deshalb wollte ich das mit etwas Trickserei doch auf die Reihe bekommen.
Ich hab das Menü mal probeweise im "Contentbereich" plaziert
http://test.al-d82.net/cms/index.php

Original aufbau

 Hier klicken, um den Code zum Kopieren zu markieren
<ul id="sdt_menu" class="sdt_menu">
 <li>
  <a href="#">
   <img src="images/1.jpg" alt=""/>
   <span class="sdt_active"></span>
   <span class="sdt_wrap">
    <span class="sdt_link">Portfolio</span>
    <span class="sdt_descr">My work</span>
   </span>
  </a>
  <div class="sdt_box">
   <a href="#">Websites</a>
   <a href="#">Illustrations</a>
   <a href="#">Photography</a>
  </div>
 </li>

</ul>



Template fürs Menü

 Hier klicken, um den Code zum Kopieren zu markieren
{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul id="sdt_menu" class="sdt_menu">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li>
 

 <a href="{$node->url}"  {if $node->target ne ""} target="{$node->target}"{/if}> 
   <img src="SlideDownBoxMenu/images/1.jpg" alt=""/>
   <span class="sdt_active"></span>
   <span class="sdt_wrap">
    <span class="sdt_link">{$node->menutext}</span>
    <!--<span class="sdt_descr">$node->alias</span>-->
   </span>
  </a>
  <div class="sdt_box">
    {menu collapse="1" loadprops=0 start_level='3' number_of_levels="1" }
  </div>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />

{else}
<li>

 <a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}">
   <img src="SlideDownBoxMenu/images/1.jpg" alt=""/>
   <span class="sdt_active"></span>
   <span class="sdt_wrap">
    <span class="sdt_link">{$node->menutext}</span>
   <!-- <span class="sdt_descr">$node->alias</span>-->
   </span>
  </a>
  <div class="sdt_box">
     {menu collapse="1" loadprops=0 start_level='3' number_of_levels="1" }
  </div>
 


 

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Da die Menütemplates
einen anderen Aufbau haben

<ul> <li>lalal</li>
          <ul><li> Unterpunkt</li></ul>
      <li>lolo</li>
</ul>

bin ich da schon gecheitert :-p
aber ich dachte mir warum binde ich das Menü nicht mir nur einer Ebene

{menu template="aldi" start_level='2'  number_of_levels="1"  lang=$lang_locale}

und füge dann das Untermenü mit start_level='3' ein.

  <div class="sdt_box">
    {menu collapse="1" loadprops=0 start_level='3' number_of_levels="1" }
  </div>

Problem hier..
Dies zeigt ja nur die Unterpunkte des Aktiven Punktes an z.B. Ankauf
dann auch bei Home :-(

{menu collapse="1" loadprops=0 start_level='3' number_of_levels="1" } <-- kann man das irgendwie mit noch ner variablen ergänzen, dass für Home die richtigen Unterpunkte und für Ankauf natürlich die Unterpunkte Ankauf... angezeigt werden?

greez AL

Offline

#4 30. Juli 2011 08:31

uniqu3
Server-Pate
Ort: Feldkirchen in Kärnten
Registriert: 20. November 2010
Beiträge: 305
Webseite

Re: [gelöst]Fremd Menü (Awesome-Slide-Down-Box) in CMSMS Template umsetzen

Wie wärs mit childrenof=$node->alias ?

Obwohl ob solche lösung auch das beste ist, da MenuManager zig mal aufgerufen wird?

Blog: i-do-this!
Unterstütze CMSMS, kauf uns ein Kaffee

Offline

#5 30. Juli 2011 08:45

AL-d82
Server-Pate
Ort: Heilbronn / Göppingen
Registriert: 18. Dezember 2010
Beiträge: 149
Webseite

Re: [gelöst]Fremd Menü (Awesome-Slide-Down-Box) in CMSMS Template umsetzen

uniqu3 schrieb:

Wie wärs mit childrenof=$node->alias ?

Obwohl ob solche lösung auch das beste ist, da MenuManager zig mal aufgerufen wird?


Danke so hat es funktioniert...
Ja ich weiß, dass das nicht die beste Lösung ist :-)

Aber weiß ich mir nicht zu helfen  monkey

Wird halt öffters auf die DB zugegriffen aber ich denke mal Performance-technisch sollte das auch nichts anderes sein als wenn man zwei Menüs auf seiner Seite hätte.?.

greez AL

Offline

#6 30. Juli 2011 11:18

engel1963
kennt CMS/ms
Registriert: 08. Dezember 2010
Beiträge: 105

Re: [gelöst]Fremd Menü (Awesome-Slide-Down-Box) in CMSMS Template umsetzen

kannst Du das mal genau zeigen, wie Du es gemacht hast?

Offline

#7 30. Juli 2011 11:24

AL-d82
Server-Pate
Ort: Heilbronn / Göppingen
Registriert: 18. Dezember 2010
Beiträge: 149
Webseite

Re: [gelöst]Fremd Menü (Awesome-Slide-Down-Box) in CMSMS Template umsetzen

Menü-Orginal gibt es hier
http://www.htmldrive.net/items/show/199 … n-Box-Menu
Dort das Menü+Dateien runterladen

Menü ist für CSS3 ausgerichtet ältere Browser zeigen es nicht optimal an

Wie schon 2 Posts weiter oben ist das nicht die beste Lösung!! Also dran denken wenn man das Menü so einbindet wie ich monkey monkey

So mit eurer Hilfe hab ich es geschafft :-)
http://test.al-d82.net/cms/index.php

Menü ins Seitentemplate einbnden:
Im Headerberich

 Hier klicken, um den Code zum Kopieren zu markieren
{literal}
 <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="SlideDownBoxMenu/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                /**
                * for each menu element, on mouseenter, 
                * we enlarge the image, and show both sdt_active span and 
                * sdt_wrap span. If the element has a sub menu (sdt_box),
                * then we slide it - if the element is the last one in the menu
                * we slide it to the left, otherwise to the right
                */
                $('#sdt_menu > li').bind('mouseenter',function(){
                    var $elem = $(this);
                    $elem.find('img')
                         .stop(true)
                         .animate({
                            'width':'170px',
                            'height':'170px',
                            'left':'0px'
                         },400,'easeOutBack')
                         .andSelf()
                         .find('.sdt_wrap')
                         .stop(true)
                         .animate({'top':'140px'},500,'easeOutBack')
                         .andSelf()
                         .find('.sdt_active')
                         .stop(true)
                         .animate({'height':'170px'},300,function(){
                        var $sub_menu = $elem.find('.sdt_box');
                        if($sub_menu.length){
                            var left = '170px';
                            if($elem.parent().children().length == $elem.index()+1)
                                left = '-170px';
                            $sub_menu.show().animate({'left':left},200);
                        }    
                    });
                }).bind('mouseleave',function(){
                    var $elem = $(this);
                    var $sub_menu = $elem.find('.sdt_box');
                    if($sub_menu.length)
                        $sub_menu.hide().css('left','0px');
                    
                    $elem.find('.sdt_active')
                         .stop(true)
                         .animate({'height':'0px'},300)
                         .andSelf().find('img')
                         .stop(true)
                         .animate({
                            'width':'0px',
                            'height':'0px',
                            'left':'85px'},400)
                         .andSelf()
                         .find('.sdt_wrap')
                         .stop(true)
                         .animate({'top':'25px'},500);
                });
            });
        </script>
{/literal}

Ins Temaplate an die Stelle wo das Menü hin soll

 Hier klicken, um den Code zum Kopieren zu markieren
{menu template="aldi" start_level=1'  number_of_levels="1"}

__________________________________________

Erstelle Menü-Template aldi

 Hier klicken, um den Code zum Kopieren zu markieren
[== Menü-Template ==]

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul id="sdt_menu" class="sdt_menu">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li>
 

 <a href="{$node->url}"  {if $node->target ne ""} target="{$node->target}"{/if}> 
   <img src="SlideDownBoxMenu/images/{$node->alias}.png" alt=""/>
   <span class="sdt_active"></span>
   <span class="sdt_wrap">
    <span class="sdt_link">{$node->menutext}</span>
     <span class="sdt_descr">{$node->extra1}</span> 
   </span>
  </a>
    {if $node->children_exist ==""}
 
   {else}
   <div class="sdt_box">
     {menu template="aldi-unter"  collapse="1" loadprops=0 start_level='2' number_of_levels="1" childrenof=$node->alias}
  </div>
  {/if}




{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li> 

<a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}">
   <img src="SlideDownBoxMenu/images/{$node->alias}.png" alt=""/>
   <span class="sdt_active"></span>
   <span class="sdt_wrap">
    <span class="sdt_link">{$node->menutext}</span>
     <span class="sdt_descr">{$node->extra1}</span> 
   </span>
  </a>
  <div class="sdt_box"> 
     {menu template="aldi-unter"  collapse="1" loadprops=0 start_level='2' number_of_levels="1" childrenof=$node->alias}
  </div>


{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />

{else}
<li>
 
 <a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}">
   <img src="SlideDownBoxMenu/images/{$node->alias}.png" alt=""/>
   <span class="sdt_active"></span>
   <span class="sdt_wrap">
    <span class="sdt_link">{$node->menutext}</span>
     <span class="sdt_descr">{$node->extra1}</span> 
   </span>
  </a>
   
   {if $node->children_exist ==""}
 
   {else}
   <div class="sdt_box">
     {menu template="aldi-unter"  collapse="1" loadprops=0 start_level='2' number_of_levels="1" childrenof=$node->alias}
  </div>
  {/if}


 

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

<img src="SlideDownBoxMenu/images/{$node->alias}.png" alt=""/> --> nimmt aus dem Ordner SlideDownBoxMenu/images/ das Bild. Bild muss wie der Seitenalias heißen Seitenalias.png

<span class="sdt_descr">{$node->extra1}</span>  --> Falls ein Wert bei Zusätzliches Seiten-Attribut 1: eingegeben wurde wird diese ausgegeben

<div class="sdt_box">
    {menu template="aldi-unter"  collapse="1" loadprops=0 start_level='2' number_of_levels="1" childrenof=$node->alias}
  </div>

--> ruft das Untermenü auf .
____________________________

Temaplate Untermenü erstellen  Name: aldi-unter

 Hier klicken, um den Code zum Kopieren zu markieren
[== Template-Untermenü ==]


{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
 
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string= " " times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string=" " times=$node->prevdepth-$node->depth}
 
{elseif $node->index > 0} 
{/if}

{if $node->current == true}
 <a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}">
   
    <span class="sdt_link">{$node->menutext}</span> </a>
 

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
 <a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}">
   
    <span class="sdt_link">{$node->menutext}</span> </a>
 

{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}


{else} 
  <a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}">
   
    <span class="sdt_link"> {$node->menutext}</span> </a>

{/if}

{/foreach}
{repeat string=" " times=$node->depth-1} 
{/if}

_________________________________


CSS Datei erstellen und ins jeweilige Template mit einbeziehen


 Hier klicken, um den Code zum Kopieren zu markieren
[== CSS fürs Menü ==]


            span.reference{
                position:fixed;
                left:10px;
                bottom:10px;
                font-size:12px;
            }
            span.reference a{
                color:#aaa;
                text-transform:uppercase;
                text-decoration:none;
                text-shadow:1px 1px 1px #000;
                margin-right:30px;
            }
            span.reference a:hover{
                color:#ddd;
            }
            ul.sdt_menu{
                margin-top:150px;
            }
            h1.title{
                text-indent:-9000px;
                background:transparent url(title.png) no-repeat top left;
                width:633px;
                height:69px;
            }


ul.sdt_menu{
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:1020px;
}
ul.sdt_menu a{
    text-decoration:none;
    outline:none;
}
ul.sdt_menu li{
    float:left;
    width:170px;
    height:85px;
    position:relative;
    cursor:pointer;
}
ul.sdt_menu li > a{
    position:absolute;
    top:0px;
    left:0px;
    width:170px;
    height:85px;
    z-index:12;
    background:transparent url(../images/overlay.png) no-repeat bottom right;
    -moz-box-shadow:0px 0px 2px #000 inset;
    -webkit-box-shadow:0px 0px 2px #000 inset;
    box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
    border:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:85px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:25px;
    left:0px;
    width:170px;
    height:60px;
    z-index:15;
}
ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:85px;
    width:170px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
    margin-left:15px;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
background:#;
}
ul.sdt_menu li span span.sdt_link{
    color:#fff;
    font-size:24px;
    float:left;
    clear:both;
}
ul.sdt_menu li span span.sdt_descr{
    color:#0B75AF;
    float:left;
    clear:both;
    width:155px; /*For dumbass IE7*/
    font-size:10px;
    letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
    display:block;
    position:absolute;
    width:170px;
    overflow:hidden;
    height:170px;
    top:85px;
    left:0px;
    display:none;
    background:#000;
        color:pink;
}
ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
    margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
    color:#fff;
}

Beitrag geändert von AL-d82 (30. Juli 2011 11:25)

Offline

#8 30. Juli 2011 11:31

engel1963
kennt CMS/ms
Registriert: 08. Dezember 2010
Beiträge: 105

Re: [gelöst]Fremd Menü (Awesome-Slide-Down-Box) in CMSMS Template umsetzen

Prima. Danke. So kann man gut lernen.

Offline

#9 30. Juli 2011 11:35

AL-d82
Server-Pate
Ort: Heilbronn / Göppingen
Registriert: 18. Dezember 2010
Beiträge: 149
Webseite

Re: [gelöst]Fremd Menü (Awesome-Slide-Down-Box) in CMSMS Template umsetzen

engel1963 schrieb:

Prima. Danke. So kann man gut lernen.

War schon am schreiben für den Lösungsansatz warst paar Minuten zu schnell mit deiner Anfrage yikes)

Hoffe ich hab nichts vergessen :-)
Aber ich denke nicht...

Beitrag geändert von AL-d82 (30. Juli 2011 11:35)

Offline

#10 30. Juli 2011 20:43

Cherry
arbeitet mit CMS/ms
Registriert: 15. Dezember 2010
Beiträge: 529

Re: [gelöst]Fremd Menü (Awesome-Slide-Down-Box) in CMSMS Template umsetzen

Nachtrag: Eine Lösungsansatz mit nur einem Template:

Der Einfachheit halber mit der mitgelieferten index.html. Dort habe ich nur das Menü ersetzt mit dem Aufruf des Templates. Sieht also so aus:

 Hier klicken, um den Code zum Kopieren zu markieren
[== smarty ==]
{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Slide Down Box Menu with jQuery and CSS3 in CMSms</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
        <meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <style>
{literal}             body{
                background:#333 url(bg.jpg) repeat top left;
                font-family:Arial;
            }
            span.reference{
                position:fixed;
                left:10px;
                bottom:10px;
                font-size:12px;
            }
            span.reference a{
                color:#aaa;
                text-transform:uppercase;
                text-decoration:none;
                text-shadow:1px 1px 1px #000;
                margin-right:30px;
            }
            span.reference a:hover{
                color:#ddd;
            }
            ul.sdt_menu{
                margin-top:150px;
            }
            h1.title{
                text-indent:-9000px;
                background:transparent url(title.png) no-repeat top left;
                width:633px;
                height:69px;
            }{/literal}
        </style>
    </head>

    <body>
        <div class="content">
            <h1 class="title">Slide Down Box Menu with jQuery and CSS3</h1>
            
            {menu template="SlidingBoxMenu"} {* <-------------  Menuaufruf hier *}
        
        
        </div>
        
        <div style="margin-top: 300px;">
            <span class="reference">

More script and css style
: <a href="http://www.htmldrive.net/" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library">www.htmldrive.net </a>                
            
            </span>
        </div>

        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
           {literal}  $(function() {
                /**
                * for each menu element, on mouseenter, 
                * we enlarge the image, and show both sdt_active span and 
                * sdt_wrap span. If the element has a sub menu (sdt_box),
                * then we slide it - if the element is the last one in the menu
                * we slide it to the left, otherwise to the right
                */
                $('#sdt_menu > li').bind('mouseenter',function(){
                    var $elem = $(this);
                    $elem.find('img')
                         .stop(true)
                         .animate({
                            'width':'170px',
                            'height':'170px',
                            'left':'0px'
                         },400,'easeOutBack')
                         .andSelf()
                         .find('.sdt_wrap')
                         .stop(true)
                         .animate({'top':'140px'},500,'easeOutBack')
                         .andSelf()
                         .find('.sdt_active')
                         .stop(true)
                         .animate({'height':'170px'},300,function(){
                        var $sub_menu = $elem.find('.sdt_box');
                        if($sub_menu.length){
                            var left = '170px';
                            if($elem.parent().children().length == $elem.index()+1)
                                left = '-170px';
                            $sub_menu.show().animate({'left':left},200);
                        }    
                    });
                }).bind('mouseleave',function(){
                    var $elem = $(this);
                    var $sub_menu = $elem.find('.sdt_box');
                    if($sub_menu.length)
                        $sub_menu.hide().css('left','0px');
                    
                    $elem.find('.sdt_active')
                         .stop(true)
                         .animate({'height':'0px'},300)
                         .andSelf().find('img')
                         .stop(true)
                         .animate({
                            'width':'0px',
                            'height':'0px',
                            'left':'85px'},400)
                         .andSelf()
                         .find('.sdt_wrap')
                         .stop(true)
                         .animate({'top':'25px'},500);
                });
            });{/literal}
        </script>
    </body>
</html>

Bis dahin also unspektakulär:

Das Menütemplate dazu sieht dann so aus:

 Hier klicken, um den Code zum Kopieren zu markieren
[== smarty ==]
{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<ul id="sdt_menu" class="sdt_menu">
{foreach from=$nodelist item=node}


{if ($node->depth == 1)}
{if ($node->prevdepth == 2)}
</div></li>
{/if}
<li>
<a href="{$node->url}">
    <img src="images/2.jpg" alt=""/>
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">{$node->menutext}</span>
    <span class="sdt_descr">Description</span>
    </span>
</a>
{if !($node->haschildren)}
</li>
{/if}
{elseif (($node->depth == 2))}
{if ($node->prevdepth == 1)}
<div class="sdt_box">
{/if}
    <a href="{$node->url}">{$node->menutext}</a>
{/if}
{/foreach}
</ul>
{/if}

Name fürs Menütemplate wäre in dem Fall: SlidingBoxMenu

Natürlich ist das soweit erst die halbe Miete. Die Bilder sind noch nicht zugeordnet, das Ganze ist noch unkommentiert. Aber die Idee wie's gehen könnte sollte erkennbar sein.
Ich hoffe, daß es so paßt, wenn nicht, kann man ja noch daran schrauben ;-)

Offline

#11 31. Juli 2011 23:05

AL-d82
Server-Pate
Ort: Heilbronn / Göppingen
Registriert: 18. Dezember 2010
Beiträge: 149
Webseite

Re: [gelöst]Fremd Menü (Awesome-Slide-Down-Box) in CMSMS Template umsetzen

@ Cherry Vielen lieben Dank smile

Mein Problem war, dass ich das Menütemplate nicht so sauber wie du erstellen konnte da ich kein Plan habe wie das alles funktioniert.

Dank dir ist das Template nur recht übersichtlich kiss

 Hier klicken, um den Code zum Kopieren zu markieren
[== Menü-Template ==]

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<ul id="sdt_menu" class="sdt_menu">
{foreach from=$nodelist item=node}


{if ($node->depth == 1)}
{if ($node->prevdepth == 2)}
</div></li>
{/if}
<li>
<a href="{$node->url}">
    <img src="SlideDownBoxMenu/images/{$node->alias}.png" alt=""/>
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">{$node->menutext}</span>
    <span class="sdt_descr">{$node->extra1}</span>
    </span>
</a>
{if !($node->haschildren)}
</li>
{/if}
{elseif (($node->depth == 2))}
{if ($node->prevdepth == 1)}
<div class="sdt_box">
{/if}
    <a href="{$node->url}">{$node->menutext}</a>
{/if}
{/foreach}
</ul>
{/if}

Habe dein Template erweitert mit den Platzhaltern für Bilder und Zusatztext unter dem Menüpunkt.
<img src="SlideDownBoxMenu/images/{$node->alias}.png" alt=""/>
--> Bild im Ordner SlideDownBoxMenu/images/ mit Aliasnamen der jeweiligen Seite.png kopieren dann wird das richtige Bild zum richtigen Menüpunkt aufgerufen.

<span class="sdt_descr">{$node->extra1}</span> 
Falls ein Wert bei Zusätzliches Seiten-Attribut 1: eingegeben wurde wird diese als "Unterpunkt-Menüberschrift" ausgegeben

DANKE

greez AL

Offline

Seiten: 1


Fußzeile des Forums

Powered by FluxBB