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

#1 27. Mai 2014 11:03

rolwalca
arbeitet mit CMS/ms
Registriert: 27. April 2011
Beiträge: 104

[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:

[== 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

[== 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:

[== 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)

Offline

#2 27. Mai 2014 20:03

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


[== 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)

Offline

#3 28. Mai 2014 11:18

rolwalca
arbeitet mit CMS/ms
Registriert: 27. April 2011
Beiträge: 104

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.

Offline