• Notitications
    • New Review Receive10 min.

    • Transaction $250 Success1 hr

    • Order Place Success3 hr

    • Netflix Subscription...6 hr

    • Check all
  • Bookmark
    • Forms
      Profile
      Tables
    • Add New Bookmark
    • Back
  • Message
    • Emay Walter

      Do you want to go see movie?

    • Jason Borne

      Thank you for rating us.

    • Sarah Loren

      What`s the project report update?

    • Check all
  • Cart
    • Women's Track Suit
      $500
    • Men's Jacket
      $500.00
    • Order Total : $1000.00
    • Go to your cartCheckout
  • EN
    English (US)
    Deutsch
    Español
    Français
    Português (BR)
    简体中文
    لعربية (ae)
  • Helen Walter

    Admin

    • Account
    • Inbox
    • Taskboard
    • Settings
    • Log in
  • Back
  • General
    • General
    • Dashboards
      • Shopping Place
      • CRM Dashboard
    • Widget
      • General
      • Chart
    • Page layout
      • Boxed
      • RTL
      • Dark Layout
      • Hide Nav Scroll
      • Footer Light
      • Footer Dark
      • Footer Fixed
  • Ui Kits
    • Components
    • Ui Kits
      • Typography
      • Avatars
      • Helper Classes
      • Grid
      • Tag & Pills
      • Progress
      • Modal
      • Alert
      • Popover
      • Tooltip
      • Dropdown
      • Accordion
      • Tab
      • Lists
    • Animation
      • Animate
      • Scroll Reveal
      • AOS animation
      • Tilt Animation
      • Wow Animation
  • Perk Ui
    • Components
    • Bonus Ui
      • Scrollable
      • Tree view
      • Toasts
      • Rating
      • dropzone
      • Tour
      • SweetAlert2
      • Animated Modal
      • Owl Carousel
      • Ribbons
      • Pagination
      • Breadcrumb
      • Range Slider
      • Image cropper
      • Basic Card
      • Creative Card
      • Draggable Card
      • Timeline
    • Icons
      • Flag icon
      • Fontawesome Icon
      • Ico Icon
      • Themify Icon
      • Feather icon
      • Whether Icon
    • Buttons
      • Default Style
      • Flat Style
      • Edge Style
      • Raised Style
      • Button Group
  • Forms
    • Forms & Tables
    • Forms
      • Form Controls
        • Form Validation
        • Base Inputs
        • Checkbox & Radio
        • Input Groups
        • Input Mask
        • Mega Options
      • Form Widgets
        • Datepicker
        • Touchspin
        • Select2
        • Switch
        • Typeahead
        • Clipboard
      • Form layout
        • Form Wizard 1
        • Form Wizard 2
        • Two Factor
    • Tables
      • Bootstrap Tables
        • Basic Tables
        • Table components
      • Data Tables
        • Basic Init
        • Advance Init
        • API
        • Data Sources
      • Ex. Data Tables
      • Js Grid Table
  • Charts
    • Components
    • Charts
      • Echarts
      • Apex Chart
      • Google Chart
      • Sparkline chart
      • Flot Chart
      • Knob Chart
      • Morris Chart
      • Chatjs Chart
      • Chartist Chart
      • Peity Chart
  • Apps
    • Application
    • Project
      • Project List
      • Create new
    • File manager
    • Kanban Board
    • Ecommerce
      • Product
      • Product page
      • Product list
      • Payment Details
      • Order History
      • Invoice
      • Cart
      • Wishlist
      • Checkout
      • Pricing
    • Email
      • Email App
      • Email Compose
    • Chat
      • Chat App
      • Video chat
    • Users
      • Users Profile
      • Users Edit
      • Users Cards
    • Bookmarks
    • Contacts
    • Tasks
    • Calendar
    • Social App
    • To-Do
    • Search Result
  • Pages
    • Miscellaneous
    • Landing page
    • Sample page
    • Internationalization
    • Starter kit
    • Other
      • Error Page
        • Error 400
        • Error 401
        • Error 403
        • Error 404
        • Error 500
        • Error 503
      • Authentication
        • Login Simple
        • Login with bg image
        • Login with image two
        • Login With validation
        • Login with tooltip
        • Login with sweetalert
        • Register Simple
        • Register with Bg Image
        • Register with image two
        • Register wizard
        • Unlock User
        • Forget Password
        • Reset Password
        • Maintenance
      • Coming Soon
        • Coming Simple
        • Coming with Bg video
        • Coming with Bg Image
      • Email templates
        • Basic Email
        • Basic With Header
        • Ecomerce Template
        • Email Template 2
        • Ecommerce Email
        • Order Success
    • Gallery
      • Gallery Grid
      • Gallery Grid Desc
      • Masonry Gallery
      • Masonry with Desc
      • Hover Effects
    • Blog
      • Blog Details
      • Blog Single
      • Add Post
    • Faq
    • Job Search
      • Cards view
      • List View
      • Job Details
      • Apply
    • Learning
      • Learning List
      • Detailed Course
    • Maps
      • Maps JS
      • Vector Maps
    • Editors
      • Summer Note
      • CK editor
      • MDE editor
      • ACE code editor
    • Knowledgebase
    • Support Ticket

Internationalization

  1. Pages
  2. Internationalization

Internationalization

Static Sub Nav

  • Base
  • Advance
    • Scrollable
    • Tree View
    • Rating
  • Forms
  • Tables

Static Sub Nav

  • Base
  • Advance
    • ScrollableNew
    • Tree ViewFind
    • Rating
  • Forms
  • Tables

How to use it

Add a class.hdg, .hdg_main, .js-languagePageHdg, .hList, .hList_loose, .masthead-nav., js-languageList, .langChoice, .js-languageSelectclass to any tag for language translate

Add a language-picker plugin js

HTML code

 <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="#"><span> Base</span></a>
</li>
<li>
<a href="#"><span> Advance</span></a>
<ul class="hList hList_loose masthead-nav js-languageList">
<li class="pl-navs-inline"><a href="#"><span>Scrollable</span></a></li>
<li class="pl-navs-inline"><a href="#"><span>Tree View</span></a></li>
<li class="pl-navs-inline"><a href="#"><span>Rating</span></a></li>
</ul>
</li>
<li>
<a href="#"><span data-mlr-text> Forms</span></a>
</li>
<li>
<a href="#"><span data-mlr-text> Tables</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How to add language

you can also add other language according to below in js and add lanuage type in langChoice
var LANGUAGES = {
"English": {
"columns": [
"Base",
"Advance",
"scrollable",
"Tree View",
"Rating",
"News",
"Tables",
"Base",
"Advance",
"scrollable",
"Tree View",
"Rating",
"News",
"Tables"
],
"heading": "Static Sub Nav",
},
"German": {
"columns": [
"Basis",
"Fortschritt",
"scrollable",
"Baumansicht",
"Die Einschaltquote",
"Nachrichten",
"Tische",
"Basis",
"Fortschritt",
"scrollable",
"Baumansicht",
"Die Einschaltquote",
"Nachrichten",
"Tische"
],
"heading": "Statisches U-Boot Nav",
},
"Russian": {
"columns": [
"Основа",
"Прогресс",
"прокручиваемый",
"Представление Дерева",
"Оценка",
"новости",
"Столы",
"Основа",
"Прогресс",
"прокручиваемый",
"Представление Дерева",
"Оценка",
"новости",
"Столы"
],
"heading": "Статический Sub Военно - морской",
},
"Arabic": {
"columns": [
"قاعدة",
"مقدما",
"التمرير",
"عرض الشجرة",
"تصنيف",
"أخبار",
"الجداول",
"قاعدة",
"مقدما",
"التمرير",
"عرض الشجرة",
"تصنيف",
"أخبار",
"الجداول"
],
"heading": "صافي قيمة الأصول شبه الثابتة",
}
};

Copyright 2023 © Cion theme by pixelstrap.

Hand crafted & made with