Forum für CMS/made simple

rolwalca

kennt CMS/ms

Registriert: 27. April 2011

Beiträge: 105

[GELÖST] Bootstrap und Menu-Manager

Moin zusammen,

ich bin lange um das Thema responsives Webdesign herumgeschlichen und kürzlich endlich das erste Projekt damit angegangen. Man kann das ganze ja per Hand coden oder eben auf die sogenannten Frameworks setzen. Ich habe mich für letztere Variante und für Bootstrap entschieden.

Mein Vorgehen: Ich klicke mir auf der Seite Layoutit meine Grundstruktur zusammen wie ich sie mir vorher überlegt habe, lade den Code herunter: index.html, fonts, js, less und css (bootstrap-theme.css, bootstrap.css, und eine leere styles.css in in die meine eigenen Formatierungen kommen). Ersetze in bootstrap.css:

 Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

durch

 Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]
@font-face {   font-family: 'Glyphicons Halflings';   src: url([[root_url]]/fonts/glyphicons-halflings-regular.eot);   src: url([[root_url]]/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url([[root_url]]/fonts/glyphicons-halflings-regular.woff) format('woff'), url([[root_url]]/fonts/glyphicons-halflings-regular.ttf) format('truetype'), url([[root_url]]/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg'); }

dann klappt`s auch mit den Glyphicons.

Ansonsten nur die index.html anpassen {menu}, {content} etc. und schon läuft es.
Geht relativ schnell und die seite ist responsiv. Klappt wunderbar.

Ich habe leider noch folgendes Problem: Mit dem Menue:
Es gibt auf der Seite Bootsnippets schicke, responsive Menues die ich gerne einfügen und benutzen würde. Nur weiß ich nicht wie ich´s dem Menuemanager beibringen soll. Jemand einen Tipp für einen Programmier/Smarty-Laien?
das HTML sieht so aus:

 Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">NavBar</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://github.com/fontenele/bootstrap-navbar-dropdowns" target="_blank">GitHub Project</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
                    <ul class="dropdown-menu multi-level">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                        <li class="dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li class="dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown-submenu">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">One more separated link</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                        <li class="dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown-submenu">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">One more separated link</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

Beitrag geändert von rolwalca (27. Mai 2014 11:06)

Tranquillius

probiert CMS/ms aus

Ort: Leipzig

Registriert: 10. September 2013

Beiträge: 52

Re: [GELÖST] Bootstrap und Menu-Manager

Ich poste dir mal mein Menüscript für die Sidebar ähnlich http://wrapbootstrap.com/preview/WB0TFD2S0

 Hier klicken, um den Code zum Kopieren zu markieren

[== Smarty ==]
{if $count > 0}
    <ul class="sidebar">
    {foreach from=$nodelist item=node}
        {if $node->depth > $node->prevdepth}
            {repeat string='<ul class="dropdown-menu animated fadeInLeft">' 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}
    
        {$classes=''}
        {if $node->parent == true or $node->current == true}
            {$classes='active'}
            {if $node->parent== true}
                {$classes=$classes|cat:' parent'}
            {/if}
        {/if}
    
        {if $node->type == 'sectionheader'}
            {if $node->haschildren == true}
                <li class="dropdown {$classes}"><a class="dropdown-toggle {$classes}" data-toggle="dropdown">{$node->extra1}<span class="sidebar-text">{$node->menutext}</span></a>
            {else}
                <li>{$node->extra1} <span class="sidebar-text">{$node->menutext}</span></li>
            {/if}
        {elseif $node->type == 'separator'}
            <li class="divider">
        {elseif $node->haschildren == true}
            <li class="dropdown {$classes}"><a class="dropdown-toggle {$classes}" data-toggle="dropdown" {if $node->target}target="{$node->target}" {/if} href="{$node->url}">{$node->extra1}<span class="sidebar-text">{$node->menutext}</span></a>
        {elseif $node->parent == true || $node->current == true}
            <li><a href="{$node->url}" class="{$classes}">{$node->extra1} {$node->menutext}</a> 
        {else}
            <li class="{$classes}"><a class="{$classes}" {if $node->target}target="{$node->target}" {/if} href="{$node->url}">{$node->extra1}<span  class="sidebar-text">{$node->menutext}</span></a>
        {/if}
    {/foreach}
    {repeat string='</li></ul>' times=$node->depth-1}
    </li>
    </ul>
{/if}

Zusätzliches Seitenattribut 1 der jeweiligen Inhaltsseite kannst du dann den Code für die Symbole angeben... z.B. für die Font-Awesome: <i class="sidebar-icon fa fa-money"></i>. Das CSS kannst du dir ja aus dem Quelltext des Templates kopieren und nach bedarf anpassen.

Beitrag geändert von Tranquillius (27. Mai 2014 20:03)

rolwalca

kennt CMS/ms

Registriert: 27. April 2011

Beiträge: 105

Re: [GELÖST] Bootstrap und Menu-Manager

OK. Danke.
Funktioniert grundsätzlich.
Muss ich mir noch ein bisschen zurecht fummeln.

Mit dem Seitenattribut war mir neu. Cool.