导航栏-GJ-UI前端组件

发布时间::2018-06-01 14:43:54 已收录 阅读:444次

将下列html代码和javascript代码复制粘贴在html文件的相应位置即可(可参考组件附带index.html文件中相应的注释说明位置);

[gj-nav1]:

HTML代码:

<nav class="gj-nav1">
    <div class="gnav nav gclear">
        <div class="gj-logo gj-left">
            <a href="javascript:(0)"><img src="images/logo.png" alt="logo" class="gj-img"></a>
        </div>
        <i class="gbar fa fa-bars" aria-hidden="true"></i>
        <ul class="gnav-ul gj-right">
            <li class="gxz"><a href="javascript:(0)">首页</a></li>
            <li><a href="javascript:(0)">关于我们</a></li>
            <li class="jnav"><a href="javascript:(0)">网站新闻</a>
                <ul>
                    <li><a href="javascript:(0)">站内新闻</a></li>
                    <li><a href="javascript:(0)">行业动态</a></li>
                </ul>
            </li>
            <li><a href="javascript:(0)">产品介绍</a></li>
            <li class="jnav"><a href="javascript:(0)">加入我们</a>
                <ul>
                    <li><a href="javascript:(0)">在线留言</a></li>
                    <li><a href="javascript:(0)">区域代理</a></li>
                </ul>
            </li>
            <li><a href="javascript:(0)">联系我们</a></li>
        </ul>
    </div>
</nav>

javascript代码:

<script>
    /*响应式导航栏开始*/
    $(document).ready(function() {
        $(".gbar").click(function() {
            $(".gnav-ul").slideToggle("slow");
            return false
        })
    });
</script>

YzmCMS代码:

<nav class="gj-nav1">
    <div class="gnav nav gclear">
        <div class="gj-logo gj-left">
            <a href="{$site[site_url]}"><img src="{$site[logo]}" alt="logo" class="gj-img"></a>
            <span>副标题部分</span>
        </div>
        <i class="gbar fa fa-bars" aria-hidden="true"></i>
        <ul class="gnav-ul gj-right">
            <li{if !isset($catid)} class="gxz" {/if}><a href="{$site[site_url]}"><i class="fa fa-home" aria-hidden="true"></i> 首页</a></li>
            {m:nav field="catid,catname,arrchildid,pclink,type,subtitle" where="parentid=0" limit="20"}
            {loop $data $v}
            {php $ischild = $v['arrchildid']!=$v['catid'] ? true : false;}
            <li{if $ischild} class="{if isset($catid) && $v['catid']==$catid}gxz {/if}jnav"{else}{if isset($catid) && $v['catid']==$catid} class="gxz" {/if}{/if}>
            <a href="{$v[pclink]}"><i class="{$v[subtitle]}" aria-hidden="true"></i> {$v[catname]}</a>
            {if $ischild}
			{php $r = get_childcat($v['catid']);}
        <ul>
			{loop $r $v}
			{php if(!$v['display']) continue;}
			<li><a href="{$v[pclink]}"><i class="{$v[subtitle]}" aria-hidden="true"></i> {$v[catname]}</a></li>
			{/loop}	
		</ul>				 
			{/if}
			</li>
			{/loop}	
            </ul>
    </div>
</nav>

[gj-nav2]:

HTML代码:

<nav class="gj-nav2">
    <div class="gnav nav gclear">
        <div class="gj-logo gj-left">
            <a href="javascript:(0)"><img src="images/logo.png" alt="logo" class="gj-img"></a>
        </div>
        <i class="gbar fa fa-bars" aria-hidden="true"></i>
        <ul class="gnav-ul gj-right">
            <li class="gxz"><a href="javascript:(0)">首页</a></li>
            <li><a href="javascript:(0)">关于我们</a></li>
            <li class="jnav"><a href="javascript:(0)">网站新闻</a>
                <ul>
                    <li><a href="javascript:(0)">站内新闻</a></li>
                    <li><a href="javascript:(0)">行业动态</a></li>
                </ul>
            </li>
            <li><a href="javascript:(0)">产品介绍</a></li>
            <li class="jnav"><a href="javascript:(0)">加入我们</a>
                <ul>
                    <li><a href="javascript:(0)">在线留言</a></li>
                    <li><a href="javascript:(0)">区域代理</a></li>
                </ul>
            </li>
            <li><a href="javascript:(0)">联系我们</a></li>
        </ul>
    </div>
</nav>

javascript代码:

<script>
    /*响应式导航栏开始*/
    $(document).ready(function() {
        $(".gbar").click(function() {
            $(".gnav-ul").slideToggle("slow");
            return false
        })
    });
</script>

YzmCMS代码:

<nav class="gj-nav2">
    <div class="gnav nav gclear">
        <div class="gj-logo gj-left">
            <a href="{$site[site_url]}"><img src="{$site[logo]}" alt="logo" class="gj-img"></a>
            <span>副标题部分</span>
        </div>
        <i class="gbar fa fa-bars" aria-hidden="true"></i>
        <ul class="gnav-ul gj-right">
            <li{if !isset($catid)} class="gxz" {/if}><a href="{$site[site_url]}"><i class="fa fa-home" aria-hidden="true"></i> 首页</a></li>
            {m:nav field="catid,catname,arrchildid,pclink,type,subtitle" where="parentid=0" limit="20"}
            {loop $data $v}
            {php $ischild = $v['arrchildid']!=$v['catid'] ? true : false;}
            <li{if $ischild} class="{if isset($catid) && $v['catid']==$catid}gxz {/if}jnav"{else}{if isset($catid) && $v['catid']==$catid} class="gxz" {/if}{/if}>
            <a href="{$v[pclink]}"><i class="{$v[subtitle]}" aria-hidden="true"></i> {$v[catname]}</a>
            {if $ischild}
			{php $r = get_childcat($v['catid']);}
        <ul>
			{loop $r $v}
			{php if(!$v['display']) continue;}
			<li><a href="{$v[pclink]}"><i class="{$v[subtitle]}" aria-hidden="true"></i> {$v[catname]}</a></li>
			{/loop}	
		</ul>				 
			{/if}
			</li>
			{/loop}	
            </ul>
    </div>
</nav>

组件说明:

1、固定在顶部(.nav-top):

<nav class="gj-nav1 nav-top">
    <div class="gnav nav gclear">
        ...
    </div>
</nav>

2、100%通栏(.nav-tl):

<nav class="gj-nav1 nav-top">
    <div class="gnav nav-tl gclear">
        ...
    </div>
</nav>

3、网站标题:

<nav class="gj-nav1">
    <div class="gnav nav gclear">
        <div class="gj-logo gj-left">
            <a href="javascript:(0)"><h3>网站标题</h3></a>
            <span>网站副标题部分</span>
        </div>
        ...
    </div>
</nav>

4、网站图标:

<nav class="gj-nav1">
    <div class="gnav nav gclear">
        <div class="gj-logo gj-left">
            <a href="javascript:(0)"><img src="images/logo.png" alt="logo" class="gj-img"></a>
        </div>
        ...
    </div>
</nav>


上一篇:已经是第一篇