- var theme_customizer = true; - var internationalization = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/loader // page-wrapper Start #pageWrapper.page-wrapper include ../../components/header // Page Body Start .page-body-wrapper.horizontal-menu include ../../components/sidebar .page-body .container-fluid .page-header .row .col-sm-6 h3 | Internationalization ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item.active Internationalization .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid .row .col-lg-12 .site .site-bd .wrapper .card .card-header.language-header.pb-0 h5 Internationalization .main(role='main') select.langChoice.js-languageSelect option English option German option Russian option Arabic .card-body.row .col-sm-6 h5.hdg.hdg_main.js-languagePageHdg Static Sub Nav .masthead(role='banner') ul.icon-lists.border.navs-icon.hList.hList_loose.masthead-nav.js-languageList li a(href='javascript:void(0)') span Base li a(href='javascript:void(0)') span Advance ul.hList.hList_loose.masthead-nav.js-languageList li.pl-navs-inline a(href='javascript:void(0)') span Scrollable li.pl-navs-inline a(href='javascript:void(0)') span Tree View li.pl-navs-inline a(href='javascript:void(0)') span Rating li a(href='javascript:void(0)') span(data-mlr-text='') Forms li a(href='javascript:void(0)') span(data-mlr-text='') Tables .col-sm-6.language-xs h5.hdg.hdg_main.js-languagePageHdg Static Sub Nav .masthead(role='banner') ul.icon-lists.border.navs-icon.hList.hList_loose.masthead-nav.js-languageList li a(href='javascript:void(0)') span Base li a(href='javascript:void(0)') span Advance ul.hList.hList_loose.masthead-nav.js-languageList li.pl-navs-inline a(href='javascript:void(0)') span Scrollable span.pull-right.badge.badge-primary New li.pl-navs-inline a(href='javascript:void(0)') span Tree View span.pull-right.badge.badge-primary Find li.pl-navs-inline a(href='javascript:void(0)') span Rating li a(href='javascript:void(0)') span(data-mlr-text='') Forms li a(href='javascript:void(0)') span(data-mlr-text='') Tables .col-lg-12 .card .card-header.pb-0 h5 How to use it span | Add a class code .hdg, .hdg_main, .js-languagePageHdg, .hList, .hList_loose, .masthead-nav., js-languageList, .langChoice, .js-languageSelect | class to any tag for language translate .card-body .language p Add a b language-picker | plugin js p b HTML code pre.mb-0 <div class="site">
<div class="site-bd">
<div class="wrapper">
<div class="card">
<div class="card-header">
<h5 class="hdg hdg_main js-languagePageHdg">Internationalization</h5>
</div>
<div class="main" role="main">
<select class="langChoice js-languageSelect">
<option val="0">English</option>
<option val="1">German</option>
<option val="2">Russian</option>
<option val="3">Arabic</option>
</select>
</div>
<div class="card-body row">
<div class="col-lg-6">
<h5 class="hdg hdg_main js-languagePageHdg">Static Sub Nav</h5>
<div class="masthead" role="banner">
<ul class="icon-lists border navs-icon hList hList_loose masthead-nav js-languageList">
<li>
<a href="javascript:void(0)"><span> Base</span></a>
</li>
<li>
<a href="javascript:void(0)"><span> Advance</span></a>
<ul class="hList hList_loose masthead-nav js-languageList">
<li class="pl-navs-inline"><a href="javascript:void(0)"><span>Scrollable</span></a></li>
<li class="pl-navs-inline"><a href="javascript:void(0)"><span>Tree View</span></a></li>
<li class="pl-navs-inline"><a href="javascript:void(0)"><span>Rating</span></a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)"><span data-mlr-text> Forms</span></a>
</li>
<li>
<a href="javascript:void(0)"><span data-mlr-text> Tables</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div> .col-lg-12 .card .card-header.pb-0 h5 How to add language span | you can also add other language according to below in js and add lanuage type in langChoice .card-body .language span.font-danger var | LANGUAGES = { br | "English": { br | "columns": [ br | "Base", br | "Advance", br | "scrollable", br | "Tree View", br | "Rating", br | "News", br | "Tables", br | "Base", br | "Advance", br | "scrollable", br | "Tree View", br | "Rating", br | "News", br | "Tables" br | ], br | "heading": "Static Sub Nav", br | }, br | "German": { br | "columns": [ br | "Basis", br | "Fortschritt", br | "scrollable", br | "Baumansicht", br | "Die Einschaltquote", br | "Nachrichten", br | "Tische", br | "Basis", br | "Fortschritt", br | "scrollable", br | "Baumansicht", br | "Die Einschaltquote", br | "Nachrichten", br | "Tische" br | ], br | "heading": "Statisches U-Boot Nav", br | }, br | "Russian": { br | "columns": [ br | "Основа", br | "Прогресс", br | "прокручиваемый", br | "Представление Дерева", br | "Оценка", br | "новости", br | "Столы", br | "Основа", br | "Прогресс", br | "прокручиваемый", br | "Представление Дерева", br | "Оценка", br | "новости", br | "Столы" br | ], br | "heading": "Статический Sub Военно - морской", br | }, br | "Arabic": { br | "columns": [ br | "قاعدة", br | "مقدما", br | "التمرير", br | "عرض الشجرة", br | "تصنيف", br | "أخبار", br | "الجداول", br | "قاعدة", br | "مقدما", br | "التمرير", br | "عرض الشجرة", br | "تصنيف", br | "أخبار", br | "الجداول" br | ], br | "heading": "صافي قيمة الأصول شبه الثابتة", br | } br | }; // Container-fluid Ends include ../../components/footer include ../../components/footer-files