HTML5+CSS3小实例:全屏导航栏菜单

html-css017

HTML5+CSS3小实例:全屏导航栏菜单,第1张

HTML5+CSS3实现全屏导航栏菜单,悬停在右上角的小图标,点击以圆形扩散的方式绽开全屏导航栏,这种方式的导航栏很吸睛,运用也越来越广,赶紧学起来呀!

效果:

源码:

main.html做个导航栏,right.html做radiobutton的五个input type="text",left.html做textbox的五个,用iframe将right和left放到所需位置,设置visibility为hidden,点击后用JS改变其值为visible,保存的实现用sample.js,就是改变这些input的defaultValue为输入的内容

1、新建并保存一个html文档,进入html代码编辑页面。

2、写一个input文本输入框,并定义ID,然后写一个按钮,并定义ID。

3、要做的效果就是点击按钮为输入框赋值,然后把输入框和按钮的css样式写好,不写样式也可以。

4、引入jquery文件,路径要正确,写jquery代码,打开浏览器测试一下,点击按钮之后,输入框内就会自动输入赋值的内容。