Dropdown list with badge in materialize css

     Materialize css can easy to display notification message in the left side of the drop down list item, also it is very simple to do using materialize css.


<ul id="ddl" class="dropdown-content">

  <li><a href="#">Value 1<span class="badge">3</span></a></li>

  <li><a href="#">Value 2<span class="badge new">1</span></a></li>

  <li><a href="#">Value 3<span class="badge">8</span></a></li>

  <li><a href="#">Value 4</a></li>

  <li><a href="#">Value 5<span class="badge new">7</span></a></li>

  <li><a href="#">Value 6</a></li>

  <li><a href="#">Value 7<span class="badge new">4</span></a></li>

  <li><a href="#">Value 8<span class="badge">56</span></a></li>

</ul>



<a class="btn dropdown-button" href="#!" data-activates="ddl">

 Please Select

 <i class="mdi-navigation-arrow-drop-down right"></i>

</a>



Example Program:- (Editor)


Editor is Loading...

Advertisement

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Tourist places in kk district:1) Thiruvalluvar statue

Hình ảnh
THIRUVALLUVAR  STATUE                                                Thiruvalluvar is the godlike artist of Tamil Nadu and has given to the world Thirukkural. The commemoration statue of Thiruvalluvar is in Kanyakumari. The platform of the statue is of 38 feet stature and the statue over it is 95 feet tall with a stupendous aggregate of 133 feet for the whole figure. The 3 level platform known as Atharapeedam is encompassed by a  creative Mandapa known as Alankara Mandapam with 38 feet stature. Encompassing the Alankara Mandapa stand 10 elephant statues meaning 8 headings with earth and space down. The father of Sri. Rama, the legend of Ramayana was called Dasaratha as he could charioteer in  ten bearings. To help the vacationers to venerate the heavenly f...
Đọc thêm

Variable in CSS

Hình ảnh
     We can use variables in css. CSS Variables are entities defined by authors, or users, of Web pages to contain specific values throughout a document. They are set using custom properties and are accessed using a specific functional notation var(). syntax    :root    {      --variable_name_1:value_1;      --variable_name_2:value_2;      ....      ....      ....      --variable_name_n:value_n;    } Example    :root    {      --clr:red;      --mrgn:50px;        }    div    {      background:var(--clr);      margin-top:var(--mrgn);    } Problems to solve      When building large sites, authors often face a maintainability challenge. In s...
Đọc thêm

How to set multiple images in a loop javascript?

Hình ảnh
     In the following javascript code is used to create the html img tag dynamically and append it to the specified div in a loop. Create Image tag using javacript       Usually we are directly create the html tag in the html code, but if you want to create this img tag dynamically you can follow the below code.    var img = document.createElement("img");    img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";    var src = document.getElementById("elementid");    src.appendChild(img); Set multiple images in a loop      If you want to add only one image, you can follow the above method. If you want to append more images dynamically you can follow the below method. Example Program:- (Editor) Editor is Loading... Output:- Advertisement
Đọc thêm