semanticui布局活动筛选添加效果代码

代码语言:html

所属分类:布局界面

代码描述:semanticui布局活动筛选添加效果代码,可以选择列表项,添加活动内容。

代码标签: semanticui 活动 筛选

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/semantic.2.0.8.css">

<style>
.agendaheader{
    padding-top:15px;
}

.agenda-item {
   margin-left: 10px;
   line-height: 1.4em !important;
}

.sidebar-container {
    width: 260px;
    overflow: hidden;
    height: 100%;
    position: fixed;
    margin: 0;
    top: 0;
    left: 0;
}

.pusher {
    padding-left: 260px;
}

.footer {
    position: fixed !important;
    background: #E6E6E6 !important;
    bottom: 0px;
    height: 75px;
    width: 100%;
    left: 260px;

}

.save-button{
    position: fixed;
    right: 10px;
    bottom: 12px;
}

.pusher {
    margin-bottom: 80px;
}

.side-agenda-item {
    color: white !important;
}

.sidebar::-webkit-scrollbar { width: 0 !important }
.sidebar { -ms-overflow-style: none; }
.sidebar { overflow: -moz-scrollbars-none; }
</style>



</head>

<body translate="no" >
  <div class="ui bottom attached segment">
  <div class="sidebar-container">
  <div class="ui  visible fixed inverted left vertical sidebar menu">
    <div class="item">
      <div class="header">
        Justin Jones - Agenda
      </div>
    </div>

    <div class="item">
      <div class="header">Saturday January 23</div>
      <div class="menu">
        <a class="item agenda-item" href="#">
          <span class="side-agenda-item" >Dog Sledding</span><br>8:00 am - 10:30 am
        </a>
        <a class="item agenda-item" href="#">
          <span class="side-agenda-item" >Snowshoe</span><br>12:00 pm - 3:30 pm
        </a>
        <a class="item agenda-item" href="#">
          <i class="large user icon" data-content="Group Activity"></i>
          <span class="side-agenda-item" >Mistress America</span><br>6:00 pm - 8:00 pm
        </a>
        <a class="item agenda-item" href="#">
          <i class="large user icon" data-content="Group Activity"></i>
          <span class="side-agenda-item" >Dinner at Wahso</span><br>8:15 pm - 11:00 pm
        </a>
      </div>

      <div class="agendaheader header">Sunday January 24</div>
      <div class="menu">
        <a class="item agenda-item" href="#">
        <span class="side-agenda-item" >Full day ski instructor</span><br>9:00 am - 4:00 pm
      </a>
        <a class="item agenda-item" href="#">
        <span class="side-agenda-item" >Lift Ticket</span><br>9:00 am - 4:00 pm
      </a>
        <a class="item agenda-item" href="#">
          <i class="large user icon" data-content="Group Activity"></i>
          <span class="side-agenda-item" >Last Days in the Desert</span><br>6:00 pm - 8:05 pm
        </a>
        <a class="item agenda-item" href="#">
          <i class="large user icon" data-content="Group Activity"></i>
          <span class="side-agenda-item" >Dinner at Chimayo</span><br>8:15 pm - 11:00 pm
        </a>
      </div>
      
      <div class="agendaheader header">Monday January 25</div>
      <div class="menu">
      <a class="item agenda-item" href="#">
        <span class="side-agenda-item" >Massage</span><br>9:00 am - 9:50 am
      </a>
        <a class="item agenda-item" href="#">
          <i class="large user icon" data-content="Group Activity"></i>
          <span class="side-agenda-item" >Dinner at Stein</span><br>7:00 pm - 11:30 pm
        </a>
      </div>
      
      <div class="agendaheader header">Tuesday January 26</div>
      <div class="menu">
      <a class="item agenda-item" href="#">
        <span class="side-agenda-item" >Cross Country Skiing</span><br>9:00 am - 12:00 pm
      </a>
      <a class="item agenda-item" href="#">
        <span class="side-agenda-item" >Call Me Lucky</span><br>2:00 pm - 4:00 pm
      </a>
        <a class="item agenda-item" href="#">
          <i class="large user icon" data-content="Group Activity"></i>
          <span class="side-agenda-item" >I'll See You In My Dreams</span><br>5:30 pm - 8:05 pm
        </a>
        <a class="item agenda-item" href="#">
          <i class="large user icon" data-content="Group Activity"></i>
          <span class="side-agenda-item" >Dinner at Grappa</span><br>8:15 pm - 11:00 pm
        </a> 
       
      </div>
      
    </div>
	
	
	  <div class="item">
      <div class="header">
        Hollie Jones - Agenda
      </div>
    </div>

    <div class="item">
      <div class="header">Sunday January 24</div>
      <div class="menu">
        <a class="item agenda-item" href="#">
        <span class="side-agenda-item" >Full day ski instructor</span><br>9:00 am - 4:00 pm
      </a>
        <a class="item agenda-item" href="#">
        <span class="side-agenda-item" >Lift Ticket</span><br>9:00 am - 4:00 pm
      </a>
        <a class="item agenda-item" href="#">
          <i class="large user icon" data-content="Group Activity"></i>
          <span class="side-agenda-item" >Last Days in the Desert</span><br>6:00 pm - 8:05 pm
        </a>
        <a class="item agenda-item" href="#">
          <i class="large user icon" data-content="Group Activity"></i>
          <span class="side-agenda-item" >Dinner at Chimayo</span><br>8:15 pm - 11:00 pm
        </a>
      </div>
      
      <div class="agendaheader header">Monday January 25</div>
      <div class="menu">
      <a class="item agenda-item" href="#">
        <span class="side-agenda-item" >Massage</span><br>9:00 am - 9:50 am
      </a>
        <a class="item agenda-item" href="#">
          <i class="large user icon" data-content="Group Activity"></i>
          <span class="side-agenda-item" >Dinner at Stein</span><br>7:00 pm - 11:30 pm
        </a>
      </div>
      
      <div class="agendaheader header">Tuesday January 26</div>
      <div class="menu">
      <a class="item agenda-item" href="#">
        <span class="side-agenda-item" >Cross Country Skiing</span><br>9:00 am - 12:00 pm
      </a>
      <a class="item agenda-item" href="#">
        <span class="side-agenda-item" >Call Me Lucky</span><br>2:00 pm - 4:00 pm
      </a>
        <a class="item agenda-item" href="#">
          <i class="large user icon" data-content="Group Activity"></i>
          <span class="side-agenda-item" >I'll See You In My Dreams</span><br>5:30 pm - 8:05 pm
        </a>
        <a class="item agenda-item" href="#">
          <i class="large user icon" data-content="Group Activity"></i>
          <span class="side-agenda-item" >Dinner at Grappa</span><br>8:15 pm - 11:00 pm
        </a> 
       
      </div>
      
    </div>


	

  </div>
  </div>
  <div class="pusher">
    <div class="ui container">
      <div class="ui basic segment">
      <h1 class="ui header">Available Activities</h1>      
       
      
     <div class="ui icon top left pointing dropdown button blue">
      <i class="filter icon"></i>
        <span class="text">All Dates</span>
      <div class="menu">
        <div class="header">Available Days</div>
        <div class="item">Jan 23 - Saturday</div>
        <div class="item">Jan 24 - Sunday</div> 
        <div class="item">Jan 25 - Monday</div>
        <div class="item">Jan 26 - Tuesday</div>
      </div>
    </div>       

        
        
      <div class="ui icon top left pointing dropdown button blue">
      <i class="sort content descending icon"></i>
        <span class="text">Sort Activities</span>
      <div class="menu">
        <div class="header">Sort By</div>
        <div class="item">Date</div>
        <div class="item">Categories</div>        
      </div>
    </div>
       
    <select id="activity-filter" name="activity-filter" multiple="" class="ui dropdown">
       <i class="filter icon"></i>
  <option value="">Showing All Activities</option>
<option value="dogsled">Dogsled</option>
<option value="crosscountrskiing">Cross Country Skiing</option>
<option value="film">Film</option>
<option value="skiing">Skiing</option>
<option value="snowshoeing">Snow Shoeing</option>
<option value="snowboarding">Snow Boarding</option>
<option value="snowbobiling">Snow Mobiling</option>
<option value="spa">Spa</option>

</select>  
        
<button class="ui but.........完整代码请登录后点击上方下载按钮下载查看

网友评论0