Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Menu not working for semantic UI like Example Code

Tags:

semantic-ui

I am a beginner at web development and I am now using semantic-ui framework for my font-end development.I have tried the sample code for the first example menu at this link.

http://semantic-ui.com/collections/menu.html

But my menu don't change active state on click like this.I have tried $("..").menu() method and it shows $(..).menu is not a function.I wonder if you could help me please.Shall I have to write my custom Javascript code to change active state on click or on hover. Here is my code

<!DOCTYPE html>
<html lang="">
<head>


    <script src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="Semantic-UI-master/dist/semantic.min.css">


<script src="Semantic-UI-master/dist/semantic.min.js"></script>

<style>

    </style>
</head>
<div class="ui three item menu">
  <a class="item">Editorials</a>
  <a class="item">Reviews</a>
  <a class="item active">Upcoming Events</a>
</div>
</html>
like image 222
Min Htet Oo Avatar asked Oct 09 '15 15:10

Min Htet Oo


People also ask

What is Semantic-UI menu?

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic-UI Menu is used to display the grouped navigation menu.

What is Semantic UI and how to use it?

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. The menu is a component that displays a group of items that serve as navigation between one section of the website to another.

What is the use of coupling in UI menu?

This allows each menu item to automatically stretch to the size of the largest item. Many of the following examples use a coupling with dropdowns to display dropdown menus inside of ui menu.

What is the difference between a menu and an item?

A menu may contain a link item, or an item formatted as if it is a link. An item may contain a nested menu in a dropdown. A menu may contain another menu group in the same level as menu items.


1 Answers

Use this:

$('.ui .item').on('click', function() {
   $('.ui .item').removeClass('active');
   $(this).addClass('active');
}); 
like image 199
Alexander N Avatar answered Jan 03 '23 12:01

Alexander N