I'm desperate. I've followed all the advices on the others post about this problem:
I've tried to use ng-cloak or class="ng-cloak" , to add this rule to css
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
But nothing to do , the directive doesn't work.
Can someone help me? Is there an alternative to ng-cloak?
I'm developing a very big portal with liferay , the page needs a lot of time to be loader , so it is fundamental for me to use something like ng-cloak!!
Thanks
This is a page for example:
I'm using Liferay with AngularJS
<div class="navbar ng-cloak" style="display:hidden;" ng-style="loaded" ng-controller="NavBarController">
<div class="navbar-inner ng-cloak" ng-show="navbarScope.menuEpermessiRetrieved" >
<div class="container ng-cloak" style="width: auto;" ng-show="navbarScope.showNavbar" ng-cloak>
<!-- navbar per acquisitore -->
<ul class="nav ng-cloak" role="navigation" id="navigatorAcquisitore" ng-if="navbarscope.isAcquisitore">
<%-- <li role="presentation" ng-hide="${isAcquisizione}" ><a role="menuitem" tooltip="{{navbarScope.acquisizione.description}}" tabindex="-1" href="${goToAcquisizioneURL}" >{{navbarScope.acquisizione.title}} </a> </li> --%>
<li class="active ng-cloak" role="presentation" ng-if="navbarscope.isAcquisitore" ><a role="menuitem" tabindex="-1" href="${goToAcquisizioneURL}" class="ng-cloak">{{navbarScope.acquisizione.title}} </a></li>
</ul>
<a class="brand ng-cloak" id="toolTipHome" ng-if="!navbarScope.isAcquisitore" href="${goToHomeURL}">
<i class="ng-cloak glyphicon glyphicon-home" tooltip="{{navbarScope.brand.description}}" data-toggle="tooltip" data-placement="bottom" title="{{navbarScope.brand.description}}"></i>
</a>
<!-- navbar standard -->
<ul class="nav ng-cloak" role="navigation" ng-if="!navbarScope.isAcquisitore">
<ul class="nav ng-cloak" id="menuAttivita" ng-if="navbarScope.menuAttivita">
<li class="ng-cloak" role="presentation" ng-hide="${isAttivita}"><a role="menuitem" class="ng-cloak" tooltip="{{navbarScope.menuAttivita.description}}" tabindex="-1" href="${goToAttivitaURL}">{{navbarScope.menuAttivita.title}} </a></li>
<li class="active ng-cloak" role="presentation" ng-show="${isAttivita}"><a c role="menuitem" tooltip="{{navbarScope.menuAttivita.description}}" class="ng-cloak" tabindex="-1" href="${goToAttivitaURL}">{{navbarScope.menuAttivita.title}}</a></li>
<%-- <li id="fat-menu" class="dropdown active" ng-show="${isAttivita}"> --%>
<!-- {{navbarScope.menuAttivita.title}} <b class="caret"></b> -->
<!-- <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> -->
<!-- <li role="presentation" ng-repeat="action in navbarScope.menuAttivita.actions" ><a role="menuitem" tabindex="-1" href="" ng-click="exec(action.action)" ng-cloak>{{action.name}}</a></li> -->
<!-- </ul> -->
<!-- </li> -->
</ul>
<!-- area di lavoro -->
<li role="presentation" class="ng-cloak" ng-hide="${isAreaDiLavoro}"><a class="ng-cloak" role="menuitem" tooltip="{{navbarScope.areaDiLavoro.description}}" tabindex="-1" href="${goToAreaDiLavoroURL}" >{{navbarScope.areaDiLavoro.title}}</a></li>
<li class="active ng-cloak" role="presentation" ng-show="${isAreaDiLavoro}"><a class="ng-cloak" role="menuitem" tooltip="{{navbarScope.brand.description}}" tabindex="-1" href="${goToAreaDiLavoroURL}" ng-click="hideMenu()" >{{navbarScope.areaDiLavoro.title}}</a></li>
<!-- area archivio -->
<li role="presentation" class="ng-cloak" ng-hide="${isDocumenti}"><a role="menuitem" tooltip="{{navbarScope.areaArchivio.description}}" tabindex="-1" href="${goToDocumentiURL}" class="ng-cloak" >{{navbarScope.areaArchivio.title}}</a></li>
<li class="active ng-cloak" role="presentation" ng-show="${isDocumenti}"><a role="menuitem" class="ng-cloak" tooltip="{{navbarScope.brand.description}}" tabindex="-1" href="#" >{{navbarScope.areaArchivio.title}}</a></li>
</ul>
<!-- menu fascicolo standard -->
<ul id="navigatorStandard" class="nav ng-cloak" ng-if="navbarScope.mostraFascicoliStandard" >
<li class="dropdown ng-cloak" ng-if="!${isFascicoloStandardCreate} && !${isFascicoloStandardSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliStandard.description}} " >
{{navbarScope.fascicoliStandard.title}} <b class="caret ng-cloak"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation " class="ng-cloak" ng-if="navbarScope.fsCreateAllowed">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardCreateURL}" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsSearchAllowed">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardSearchURL}" > Ricerca </a>
</li>
</ul>
</li>
<li class="dropdown active ng-cloak" ng-if="${isFascicoloStandardCreate} || ${isFascicoloStandardSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliStandard.description}} " >
{{navbarScope.fascicoliStandard.title}} <b class="caret"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsCreateAllowed && !${isFascicoloStandardCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardCreateURL}" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsCreateAllowed && ${isFascicoloStandardCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" ng-click="showCreaFascicoloStandard()" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsSearchAllowed && !${isFascicoloStandardSearch}">
<a role="menuitem" tabindex="-1" href="${goToFStandardSearchURL}" class="ng-cloak" > Ricerca </a>
</li>
<li class="ng-cloak" role="presentation" ng-if="navbarScope.fsSearchAllowed && ${isFascicoloStandardSearch}">
<a role="menuitem" tabindex="-1" class="ng-cloak" ng-click="backToRicerca()" > Ricerca </a>
</li>
</ul>
</li>
</ul>
<!-- menu fascicoli del personale-->
<ul class="nav ng-cloak" id="navigatorPersonale" ng-if="navbarScope.mostraFascicoli">
<li class="dropdown ng-cloak" ng-if="!${isFascicoloPersonaleCreate} && !${isFascicoloPersonaleSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliPersonale.description}} " >
{{navbarScope.fascicoliPersonale.title}} <b class="caret"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation" ng-if="navbarScope.fpCreateAllowed" class="ng-cloak">
<a role="menuitem" tabindex="-1" class="ng-cloak" href="${goToFPersonaleCreateURL}" > Crea </a>
</li>
<li class="ng-cloak" role="presentation" ng-if="navbarScope.fpSearchAllowed">
<a class="ng-cloak" role="menuitem" tabindex="-1" href="${goToFPersonaleSearchURL}" > Ricerca </a>
</li>
</ul>
</li>
<li class="dropdown active ng-cloak" ng-if="${isFascicoloPersonaleCreate} || ${isFascicoloPersonaleSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliPersonale.description}} " >
{{navbarScope.fascicoliPersonale.title}} <b class="caret"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fpCreateAllowed && !${isFascicoloPersonaleCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFPersonaleCreateURL}" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fpCreateAllowed && ${isFascicoloPersonaleCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" ng-click="goToCrea()" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fpSearchAllowed && !${isFascicoloPersonaleSearch}">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFPersonaleSearchURL}" > Ricerca </a>
</li>
<li class="ng-cloak" role="presentation" ng-if="navbarScope.fpSearchAllowed && ${isFascicoloPersonaleSearch}">
<a class="ng-cloak" role="menuitem" tabindex="-1" ng-click="goToCerca()" > Ricerca </a>
</li>
</ul>
</li>
<%-- <li role="presentation" ng-hide="${isFascicoloPersonale}" ><a role="menuitem" tooltip="{{navbarScope.fascicoliPersonale.description}}" tabindex="-1" href="${goToFascicoloPersonaleURL}" ng-cloak>{{navbarScope.fascicoliPersonale.title}} <b class="caret" ></b></a></li> --%>
<%-- <li id="fat-menu" class="dropdown active" ng-show="${isFascicoloPersonale}"> --%>
<!-- <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" ng-cloak>{{navbarScope.fascicoliPersonale.title}} <b class="caret" ></b></a> -->
<!-- <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> -->
<!-- <li role="presentation" ng-repeat="action in navbarScope.fascicoliPersonale.actions" ><a role="menuitem" tabindex="-1" href="" ng-click="exec(action.action)" ng-cloak>{{action.name}}</a></li> -->
<!-- </ul> -->
<!-- </li> -->
</ul>
<ul class="nav pull-right ng-cloak" id="listaUffici">
<li id="fat-listaUffici-menu" class="dropdown ng-cloak" >
<a href="#" id="drop6" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" title="{{navbarScope.ufficioSelected.nomeUnitaOrganizzativa}} " >{{navbarScope.ufficioSelected.displayName}}
<b class="caret ng-cloak" ng-show="navbarScope.listaUffici.length>1"></b></a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop6" ng-show="navbarScope.listaUffici" >
<li role="presentation" class="ng-cloak" ng-repeat="u in navbarScope.listaUffici" class="ng-cloak"><a role="menuitem" tabindex="-1" href="" ng-click="navbarScope.cambiaUfficio(u)" title="{{u.nomeUnitaOrganizzativa}}" >{{u.displayName}}</a>
</li>
</ul>
</li>
<li id="fat-listaRuoli-menu" class="dropdown ng-cloak" >
<a href="#" id="drop7" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" title="{{navbarScope.ruoloSelected.codice}}" >{{navbarScope.ruoloSelected.codice}}
<b class="caret ng-cloak" ng-show="navbarScope.ufficioSelected.ruoli.length>1"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop7" >
<li role="presentation" ng-repeat="r in navbarScope.ufficioSelected.ruoli" class="ng-cloak" >
<a role="menuitem" class="ng-cloak" tabindex="-1" href="" ng-click="navbarScope.cambiaRuolo(r)" title="{{r.codice}}" >{{r.codice}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
There is some reason you need the "style" attribute? This style overrides the class css code and if is present it will always be "display:hidden".
As a quick&dirty option you can use ng-if to show/hide html code. Remove all ng-cloack and the style attribute and use:
<div ng-if="loadEnded"> content </div>
I used it in a portlet with liferay 6.2/angular 1.4 and it works.
Related
So here's my issue, I'm trying to include a facility where by in a search field if you check a checkbox it needs to remove any items which have data-isletagreed == 3 against them.
#if (prop.isLetAgreed == 0)
{
<span class="LetAgreed">
<p>FOR SALE</p>
</span>
}
#if (prop.isLetAgreed == 3)
{
<span class="LetAgreed" style="left:20px;">
<p>NOW SOLD SSTC</p>
</span>
}
#if (prop.isLetAgreed == 2)
{
<span class="LetAgreed">
<p>NOW SOLD</p>
</span>
}
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-eye fa-3x"></i>
</div>
</div>
<img src="#prop.photo" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>#Html.Raw(propertyNameNew)</h4>
<div class="property-features">
<span><i class="fa fa-gbp"></i> #prop.price </span>
<span><i class="fa fa-bed"></i> #prop.maxtenants</span>
</div>
</div>
</div>
}
}
}
This is my current search form, what should I add to make the search button take into account the prop.isLetAgreed == 3 and if a checkbox is checked.
<div class="row search-input-group">
<div class="col-md-6">
<div class="input-group">
<span style="min-width:150px" class="input-group-addon">Bedrooms</span>
<div class="dropdown searchRoomWebApi">
<button class="btn btn-default dropdown-toggle search-dropdownWebApi" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
<span class="txt">select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu search-dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">select</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">5</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">6</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<span style="min-width:150px" class="input-group-addon">Maximum Price</span>
<div class="dropdown searchPriceWebApi">
<button class="btn btn-default dropdown-toggle search-dropdownWebApi" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
<span class="txt">select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu search-dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">select</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£100000</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£200000</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£300000</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£400000</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£500000</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<a id="btnSearchPropertyWebApi" style="width:100%" href="#" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> <span class="txt">Search</span>
</a>
</div>
</div>
i want to create a dropdown menu with nested submenu so that when users over on a submenu it should display its dropdown list and when the mouse is taken out of the submenu it should hide its dropdown list. i have tried but it works only with on click() method but i want to use on hover(). here is my code
html
<nav class="navbar navbar-inverse" role="banner">
<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="#"><img src="design/img/logo.png" alt="logo"></a>
<h6><small>Some text</small></h6>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="main-navigation">
<li class="">Accueil</li>
<li class="dropdown">
Groupe Cible <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="-1" href="#">Cible Etudes & Conseils <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="-1">Qui Sommes Nous <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Présentation </a>
<ul class="dropdown-menu">
<li>Cible Etudes/Conseil</li>
<li>Notre Vision</li>
<li>Notre Mission</li>
<li>Nos Valeurs</li>
<li>Notre Force</li>
<li>Nos Filiales</li>
</ul>
</li>
<li>Notre Equipe</li>
<li>Nous Ecrire</li>
<li>Retrouvez Nous </li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" href="#" data-toggle="dropdown">Notre Offre </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" data-toggle="dropdown">Les Enquêtes et Sondage</a>
<ul class="dropdown-menu">
<li><a tabindex="0">procédures Qualité</a></li>
<li>Méthodes</li>
<li><a tabindex="0">outils de Collecte</a></li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" data-toggle="dropdown">Les Etudes</a>
<ul class="dropdown-menu">
<li class="test" class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Marketing</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Marché</a></li>
<li><a tabindex="0">Consommateurs</a></li>
<li><a tabindex="0">Stratégie Marketing</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" class="test" href="<?=url::site('fr/a_propos/14/development')?>" tabindex="0" data-toggle="dropdown">Développement</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Impact environnemental</a></li>
<li><a tabindex="0">Développement Urbain et Local</a></li>
<li><a tabindex="0">Assainissement</a></li>
<li><a tabindex="0">Evaluation des projets et programmes</a></li>
</ul>
</li>
<li><a tabindex="0">Moyens Logistiques</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="0" data-toggle="dropdown">Le Conseil</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Conseil en Marketing</a></li>
<li><a tabindex="0">Conseil en Gestion</a></li>
<li><a tabindex="0">Recherche de Financement</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="0" data-toggle="dropdown">La Formation </a>
<ul class="dropdown-menu">
<li><a tabindex="0">Formation en Vente</a></li>
<li><a tabindex="0">Formation en Marketing</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nous Ont Fait Confiance </a>
<ul class="dropdown-menu" >
<li>Cameroun</li>
<li>Afrique</li>
<li>L'international</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Où Intervenons Nous </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Gabon</li>
<li>Tchad</li>
<li>Congo Brazzaville</li>
<li>Côte d’Ivoire</li>
<li>Burkina Faso</li>
<li>Mauritanie</li>
<li>Mali</li>
<li>Bénin</li>
<li>Guinée Conakry</li>
<li>Niger</li>
<li>Togo</li>
<li>Djibouti</li>
<li>Rwanda</li>
<li>Burundi</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nos Publications </a>
<ul class="dropdown-menu">
<li>Articles</li>
<li>Résultats</li>
<li>New</li>
</ul>
</li>
</ul>
</li>
<!-- =========================== cible RH ============================== -->
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Cible RH Emploi</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Qui Sommes Nous </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Présentation </a>
<ul class="dropdown-menu">
<li><a tabindex="0">Cible RH Emploi</a></li>
<li><a tabindex="0">Notre Vision</a></li>
<li><a tabindex="0">Notre Mission</a></li>
<li><a tabindex="0">Nos Valeurs</a></li>
<li><a tabindex="0">Notre Force</a></li>
<li><a tabindex="0">Nos Filiales</a></li>
</ul>
</li>
<li>Notre Equipe</li>
<li>Nous Ecrire</li>
<li>Retrouvez Nous </li>
</ul>
</li>
<li >Notre Offre </li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nous Ont Fait Confiance </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Afique</li>
<li>L'international</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Où Intervenons Nous </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Gabon</li>
<li>Tchad</li>
<li>Congo Brazzaville</li>
<li>Côte d’Ivoire</li>
<li>Burkina Faso</li>
<li>Mauritanie</li>
<li>Mali</li>
<li>Bénin</li>
<li>Guinée Conakry</li>
<li>Niger</li>
<li>Togo</li>
<li>Djibouti</li>
<li>Rwanda</li>
<li>Burundi</li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" href="" tabindex="0" data-toggle="dropdown">Nos Publications </a>
<ul class="dropdown-menu">
<li>Articles</li>
<li>Résultats</li>
<li>New</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown <?=(!empty($service))?"active":""?>">
Services <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Web Design</li>
<li>SEO</li>
</ul>
</li>
<li class="dropdown <?=(!empty($client))?"active":""?>">
Clients <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>MTN</li>
<li>Apple</li>
</ul>
</li>
<li class="dropdown <?=(!empty($equipe))?"active":""?>">
Team <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Mark</li>
<li>John</li>
</ul>
</li>
<li class="dropdown <?=(!empty($partenaire))?"active":""?>">
Partners <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Bootstrap</li>
<li>Ubuntu</li>
</ul>
</li>
<li class="dropdown <?=(!empty($actualite))?"active":""?>">
News <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Perl</li>
<li>Python</li>
</ul>
</li>
<li class="dropdown <?=(!empty($project))?"active":""?>">
Projects <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Java</li>
<li>Ajax</li>
</ul>
</li>
<li class="dropdown <?=(!empty($contact))?"active":""?>">
Contacts <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Contact Cible Etudes/Conseils</li>
<li>Contact Cible RH</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
then my jquery
$('a.test + ul').css("display","none");
$('.dropdown-submenu').css("position","relative");
$('.dropdown-submenu .dropdown-menu').css({"top": "0","left": "100%","margin-top": "-1px"});
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// Re-add .open to parent sub-menu item
$(this).parent().addClass('open');
$(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});
please help me! Thanks.
You can do this by simply using CSS like follows-
.dropdown-submenu:hover .dropdown-menu {
display: block;
margin-top: 0; // remove the gap so it doesn't close
}
Working fiddle here
My menu is :
<div class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="active">
<a href="default.asp" id="home">
ANA SAYFA
</a>
</li>
<li class=" dropdown">
<a href="/kurumsal/" class="dropdown-toggle"
data-toggle="dropdown">
KURUMSAL
<b class="caret"></b>
</a>
<ul class="dropdown-menu" aria-labelledby="drop2" role="menu">
<li>Hakkımızda</li>
<li>Kadromuz</li>
<li>Hizmet Anlayışımız</li>
<li>İşletme Fotoğrafları</li>
<li>Referanslar</li>
<li>Fuar Fotoğrafları</li>
<li>Sözleşme Fotoğrafları</li>
</ul>
</li>
<li class=" dropdown">
<a href="/urunler/" class="dropdown-toggle"
data-toggle="dropdown">
ÜRÜNLER
<b class="caret"></b>
</a>
<ul class="dropdown-menu" aria-labelledby="drop2" role="menu">
<%
set urn=server.createobject("adodb.recordset")
urn.open "kategori order by sira asc",cms,1,3
%>
<% do while not urn.eof %>
<li><%=urn("kategori")%></li>
<%
urn.movenext
loop
%>
<%
urn.close
set urn = Nothing
%>
</ul>
</li>
<li class="">
<a href="basinda-schtec.asp" id="press" >
BASINDA SCHTEC
</a>
</li>
<li class="">
<a href="satis-sonrasi.asp" id="sell" >
SATIŞ SONRASI
</a>
</li>
<li class="">
<a href="iletisim.asp" id="contact" >
İLETİŞİM
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">TR</li>
<li>EN</li>
<li>RU</li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li><i style="color:#fff;font-size:18px" class="fa fa-facebook-square"></i></li>
</ul>
<!--<form class="navbar-form navbar-right" role="search" action="/search/" method="get">-->
<!--<div class="form-group">-->
<!--<input name="q" type="text" class="form-control input-sm" placeholder="Arama">-->
<!--</div>-->
<!--<button type="submit" class="btn btn-sm"><i class="glyphicon glyphicon-search"></i></button>-->
<!--</form>-->
</div>
And I want to learn how to add active class "li" element when clicked
for example I clicked İLETİŞİM when I go to iletisim.asp only
<li class="active">
<a href="iletisim.asp" id="contact" >
İLETİŞİM
</a>
</li>
the others class= ""
I have been researching for a while now and could not find a solution for this nor any related question to my issue, So sorry if this was already asked before.
I'm developing a website using Twitter Bootstrap 2.3 and I have an issue with the collapsible menu component in Android (tested using Samsung Galaxy s4 with android 4.2 on Chrome latest version).
When I "uncollapse" the menu for the first time, the components works as expected, but if I collapse it, and then "uncollapse" it again, the links appear like "hidden". I can still touch them and the links work as expected. But nothing is displayed, as if they where transparent or something.
Did anybody experience an issue like this one? Any help would be appreciatted.
I have found a solution to this. It is kinda rough though.
This was my html markup:
<div id="navContainer" class="nav-collapse navbar-responsive-collapse in collapse" style="height: auto;">
<ul id="headerNav" class="nav green">
<li class="active"><a class="headerLink" href="/es">El Pueblo</a></li>
<li><a class="headerLink" href="#">Cómo llegar</a></li>
<li><a class="headerLink" href="/es/noticias">Noticias</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop1" role="button" data-toggle="dropdown" href="#">Turismo <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu green" role="menu" aria-labelledby="drop1">
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/historia">Historia</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Actividades</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/info">Info General</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/paseos">Paseos</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Imágenes</a></li>
</ul>
</li>
<li><a class="headerLink" href="/es/mapas">Mapa Interactivo!</a></li>
<li><a class="headerLink" href="#">Contacto</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Idioma <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu green" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/es/">Español</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/en/">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/de/">Deutsch</a></li>
</ul>
</li>
</ul>
</div>
This is the fix that worked for me:
.nav-collapse {
-webkit-transform: none !important;
z-index: 1 !important;
}
This issue was only present in Android using Chrome. On IOS the issue was not there
I have found a solution to this. It is kinda rought thouth.
This was my html markup:
<div id="navContainer" class="nav-collapse navbar-responsive-collapse in collapse" style="height: auto;">
<ul id="headerNav" class="nav green">
<li class="active"><a class="headerLink" href="/es">El Pueblo</a></li>
<li><a class="headerLink" href="#">Cómo llegar</a></li>
<li><a class="headerLink" href="/es/noticias">Noticias</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop1" role="button" data-toggle="dropdown" href="#">Turismo <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu green" role="menu" aria-labelledby="drop1">
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/historia">Historia</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Actividades</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/info">Info General</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/paseos">Paseos</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Imágenes</a></li>
</ul>
</li>
<li><a class="headerLink" href="/es/mapas">Mapa Interactivo!</a></li>
<li><a class="headerLink" href="#">Contacto</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Idioma <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu green" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/es/">Español</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/en/">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/de/">Deutsch</a></li>
</ul>
</li>
</ul>
</div>
This is the fix that worked for me:
.nav-collapse {
-webkit-transform: none !important;
z-index: 1 !important;
}
This issue was only present in Android using Chrome. On IOS the issue was not there
I have this code:
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<ul class="nav">
<li>Startseite</li>
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Produkte<b class="caret"> </b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
</ul>
</li>
<li class="dropdown">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Produkte<b class="caret"> </b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
it shoud show up like this:
but it is showing up like this in my code(i click on produkte):
this is my header in html:
<link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">
<script src="{{STATIC_URL}}js/jquery191.js"></script>
<script src="{{STATIC_URL}}js/bootstrap.min.js"></script>
why is this? can someone please help me?
thanks a lot
you have used float:left for li you need to remove it from you custom css file.