I´ve implemented the Foundation Off-Canvas Menu as a Multilevel Menu. When I use the original code example from the documentation, I´ve the problem, that the submenu isn´t working. It´s shown but it´s not formated (sub-levels not hidden) and the click event to open the submenu is also not triggered.
To me it looks like some parts are not compiled although I compile the whole foundation framework, not only specific modules.
Has anybody an idea where I can start searching? The other parts of the menu work great.
Here´s the HTML code:
<aside class="left-off-canvas-menu" aria-hidden="true">
<ul class="off-canvas-list">
<li><label>Navigationsmenü</label></li>
<li><i class="fa fa-shopping-cart"></i> Mein Warenkorb</li>
<li><i class="fa fa-arrow-right"></i> Zur Kasse</li>
<li><label>Mein Konto</label></li>
<li class="my-account">
<div class="avatar">
<img src="<?php echo "http://www.gravatar.com/avatar/" . md5( strtolower( trim( 'mail#mail.com' ) ) ) . "?s=100";?>" class="avatar" alt="Avatar" />
</div>
<div class="user">
<span class="title">John Doe</span>
<span class="email">email#email.com</span>
</div>
<div class="clearfix"></div>
<i class="fa fa-user"></i> Meine Daten ändern
</li>
<li><i class="fa fa-home"></i> Adressbuch bearbeiten</li>
<li><i class="fa fa-truck"></i> Meine Bestellungen</li>
<li><i class="fa fa-lock"></i> Passwort ändern</li>
<li><i class="fa fa-envelope"></i> E-Mail Adresse ändern</li>
<li><i class="fa fa-power-off"></i> Ausloggen</li>
<li><label>Produktkategorien</label></li>
<li class="has-submenu">Aktionen
<ul class="left-submenu">
<li class="back">Zurück</li>
<li><label>Level 1</label></li>
<li>Sonderangebote der Woche</li>
<li>Monatsaktionen</li>
<li>Spezialaktionen
<li>Maximal sparen</li>
</ul>
</li>
<li>Gutscheine</li>
<li class="has-submenu">Ernährung
<ul class="left-submenu">
<li class="back">Zurück</li>
<li><label>Level 1</label></li>
<li>Nahrungsergänzungsmittel</li>
<li>Vitamine & Mineralstoffe</li>
<li>Spezialnahrung
<li>Gesund abnehmen</li>
<li>Sportlernahrung</li>
</ul>
</li>
</ul>
</aside>
And that´s the SCSS file (app.scss):
#import "compass/css3/border-radius";
#import "compass/css3/box-shadow";
#import "settings";
#import "foundation";
Thanks,
Michael
Related
I am trying to use django-social-media share buttons. The share link comes with text instead of social media icons such as facebook, linkedin and twitter. How can i display the icons instead of "Post to FaceBook" text link?
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x" style="color:#4267B2"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>{% post_to_facebook object_or_url %}
</span>
</a>
<a href="{{ linkedin_url }}">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x" style="color: #0e76a8"></i>
<i class="fab fa-linkedin fa-stack-1x fa-inverse"></i>{% post_to_linkedin object_or_url %}
</span>
</a>
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x" style="color: #1DA1F2"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>{% post_to_twitter "New Article: {{object.title}}. Check it out!" object_or_url %}
</span>
</a>
What eventually worked was, making a template folder with identical folder structure with django-social-share templates under project folder and customize the template.
Twitter and Facebook worked but not LinkedIn.
<div class="tweet-this">
<i class="fab fa-twitter-square" style="color: #1DA1F2" aria-hidden="true"></i>{{link_text}}
</div>
I'm new with django-cms and i want to add menu like image i post.
I have read the doc but i don't know how to create my custom menu.
I want to get something like this html code (Please add me explain):
some place in code i have .col-4, and another place i have .col-3 look image and code for more comprehension.
<ul class="menu">
<li class="toggle-menu">
<i class="fa icon_menu"></i>
</li>
<li class="first">
Accueil
</li>
<li>
Photographie
<div class="megamenu full">
<div class="row">
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Présentation</li>
<li>A propos</li>
</ul>
</div>
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Evènements</li>
<li>Mariage</li>
<li>Portrait</li>
</ul>
</div>
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Entreprise et institutions</li>
<li>Portraits Corporate</li>
<li>Reportage entreprise</li>
</ul>
</div>
</div>
</div>
</li>
<li>
Production media
<div class="megamenu full">
<div class="row">
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Présentation</li>
<li>A propos</li>
<li>Nos offres</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Services</li>
<li>Montage</li>
<li>Drones</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Vos évènements</li>
<li>Mariages</li>
<li>Reportage coorporate</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Location</li>
<li>Cameras</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
but i dont know how, please help
I have a simple navigation bar:
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<li class="submenu">
<a href="index.php">
<i a href="index.php" class="glyphicon glyphicon-edit"></i> Idmancilar
<span class="caret pull-right" href="index.php"></span>
</a>
<ul>
<li>Qeydiyyat sorgulari</li>
</ul>
</li>
<li><i class="glyphicon glyphicon-edit"></i>Mesqciler</li>
<li><i class="glyphicon glyphicon-edit"></i> Klublar</li>
<li><i class="glyphicon glyphicon-edit"></i>Yarislar</li>
<li><i class="glyphicon glyphicon-edit"></i> Qeydiyyat sorgulari</li>
<li><i class="glyphicon glyphicon-edit"></i> Logout</li>
</ul>
</div>
</div>
When I open the submenu the player_requests is opened, but from there I can not navifate back to the parent index.php page. When I click on element the span and submenu are opened again and no redirection to the required index.php page.
The problem is likely due to the fact that you have invalid HTML.Only the <a>, <area>, <base> and <link> tags can have the href attribute.
Both <i a href="index.php" ... > and <span ... href="index.php"> are invalid.
You'll need to remove href from both your <i> and your <span> tags,as can be seen in the following:
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<li class="submenu">
<a href="index.php">
<i class="glyphicon glyphicon-edit"></i> Idmancilar
<span class="caret pull-right"></span>
</a>
<ul>
<li>Qeydiyyat sorgulari</li>
</ul>
</li>
<li><i class="glyphicon glyphicon-edit"></i>Mesqciler</li>
<li><i class="glyphicon glyphicon-edit"></i> Klublar</li>
<li><i class="glyphicon glyphicon-edit"></i>Yarislar</li>
<li><i class="glyphicon glyphicon-edit"></i> Qeydiyyat sorgulari</li>
<li><i class="glyphicon glyphicon-edit"></i> Logout</li>
</ul>
</div>
I am working with django and bootstrap3. I've downloaded a template from from http://startbootstrap.com/template-overviews/landing-page/ . The github repo is https://github.com/IronSummitMedia/startbootstrap-landing-page/blob/gh-pages/index.html
This contains The following in the index.html:
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Landing Page</h1>
<h3>A Template by Start Bootstrap</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
How is the introductory photo included here. I see the stock photo at https://github.com/IronSummitMedia/startbootstrap-landing-page/blob/gh-pages/img/intro-bg.jpg . I assume this is some bootstrap3 magic?
put the correct url in the landing-page.css
.intro-header {
background: url(../img/intro-bg.jpg) no-repeat center center;
background-size: cover;
}
thats it
Do you know how to force django bootstrap toolkit to be responsive? I mean e.g the change of navbar when width is small.
I have in base.html:
{% bootstrap_stylesheet_tag %}
{% bootstrap_stylesheet_tag "responsive" %}
what is "translated" to when checked in view source of page:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.css">
full base.html content here: https://gist.github.com/andilab/785133e800f023c89689
example rendered # jsfiddle here: http://jsfiddle.net/andilab/4Jqab/
Find here the updated jsfiddle http://jsfiddle.net/4Jqab/1/
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"><img src="http://dogspot.dyndns.org/static/lapa_icon.png">dogspot</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Dogs</li>
<li>Form</li>
<li class="dropdown">
Forms<b class="caret"></b>
<ul class="dropdown-menu">
<li>create</li>
<li>contact</li>
<li>Inline</li>
<li>Search</li>
<li>Using template</li>
</ul>
<li>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form></li>
<li>create</li>
<li>contact</li>
<li>Pagination</li>
<li>Buttons</li>
</ul>
</div>
</div>
</div>
</div>
A couple of things were missed:
A fluid container for the nav
You need to specify the collapsible part of the navbar
A navbar toggle button
See http://getbootstrap.com/2.3.2/components.html#navbar